3的div覆蓋整個窗口

我有與CSS定位的div小的問題 - 我想使3周的div覆蓋整個窗口：3的div覆蓋整個窗口

DIV1（頂部）與寬度爲100％和恆定高度
DIV2 （左下）等寬和全高
DIV3（右下）與剩餘的寬度，也充滿了高度

有沒有辦法做到這一點沒有JavaScript？

謝謝。

來源

2014-04-01 Rodgard

這是你在找什麼？

FIDDLE：http://jsfiddle.net/5V48p/1/

編輯 - 只看見自己的關於底部的div流體高度評價 - 看到這一點：http://jsfiddle.net/5V48p/2/

的HTML：

<body> 
    <div id="top">Word, yo.</div> 
    <div id="bottom-left">Look at me!</div> 
    <div id="bottom-right">Hobajoba!</div> 
</body>

的CSS：

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 
#top { 
    height: 100px; 
    background-color: yellow; 
} 
#bottom-left { 
    position:absolute; 
    bottom:0px; 
    float:left; 
    width: 180px; 
    background-color: lightblue; 
    height:calc(100% - 100px); 
    margin-top:100px; 
} 
#bottom-right { 
    position:absolute; 
    bottom:0px; 
    width: calc(100% - 180px); 
    margin-left:180px; 
    background-color: pink; 
    height:calc(100% - 100px); 
    margin-top:100px; 
}

來源

2014-04-01 17:35:09 Octavian

是的，css「calc」函數 - 這正是我所需要的。謝謝！ – Rodgard

例如：

.div1 { 
    position:absolute; 
    left:0; 
    right: 0; 
    top:0; 
    height: 100px; 
} 
.div2 { 
    position:absolute; 
    left:0; 
    bottom: 0; 
    height: 20px; 
    width: 100px; 
} 
.div3 { 
    position:absolute; 
    right:0; 
    bottom: 0; 
    height: 20px; 
    left: 100px; 
}

EXAMPLE

來源

2014-04-01 16:49:37 Nick

謝謝，但div2和div3不能有恆定的高度。 – Rodgard

這裏，結帳我的jsfiddle：http://jsfiddle.net/Shwunky/nwy6h/

基本上，它是在z-index

一齣戲我這個人是看到的唯一問題如果你刪除右下角和頂部的分區，左下角的分區將填滿整個vi ewport。

來源

2014-04-01 17:01:49 Shwunky

好的，但是如果我將某些東西放在「botright」div中，它會被其他div所覆蓋。 – Rodgard

例如，如果您將一個段落放入botright div，您可以使其具有相對位置，並將其頂部偏移頂部div的高度，並將其左側偏移左側div的寬度。 – Shwunky

是的你可以用javascript來做到這一點。關鍵是要了解如何利用職位：絕對的。

這裏有一個JS小提琴您展示它是如何做： http://jsfiddle.net/cbbZq/

HTML：

<div id="container"> 
    <div id="top">Top</div> 
    <div id="bottom-left">Bottom Left</div> 
    <div id="bottom-right">Bottom Right</div> 
</div>

CSS：

html, body { 
    width: 100%; 
    height: 100%; 
} 

#container { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

#top { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 200px; 
    background-color: lightblue; 
} 

#bottom-left { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    bottom: 0; 
    width: 100px; 
    background-color: yellow; 
} 

#bottom-right { 
    position: absolute; 
    top: 200px; 
    left: 100px; 
    right: 0; 
    bottom: 0; 
    background-color: green; 
}

來源

2014-04-01 17:33:24 richardaday

可以按如下方式實現這一目標用table,tr,td：

<body> 
    <table class="table" cellspacing="0"> 
     <tr id="top"> 
      <td colspan="2"></td> 
     </tr> 
     <tr id="division"> 
      <td id="left"></td> 
      <td id="right"></td> 
     </tr> 
    </table> 
</body>

和css：

html,body { 
    height:100%; 
} 
#top { 
    width: 100%; 
    height: 100px; 
    background-color:red; 
} 
.table { 
    height: 100%; 
} 
#division { 
    width: 100%; 
    min-height: 100%; 
} 

#left { 
    background-color:green; 
    min-width: 100px; 
} 

#right { 
    background-color:blue; 
    width: 100%; 
}

這裏的演示：http://jsfiddle.net/aneelkkhatri/2c7ag/1/

來源

2014-04-01 17:35:17 aneelkkhatri

HTML：

<body> 
    <div id="top">TOP AREA</div> 
    <div id="bottom-right"> 
      <div id="bottom-left"> 
       FIXED WIDTH 
      </div> 
      NOT FIXED 
    </div> 
</body>

CSS：

html,body{margin:0;padding:0;width:100%;} 

#top 
{ 
    width:100%; 
} 

#bottom-left 
{ 
    width:180px; 
    float:left; 
} 

#bottom-right 
{ 
    width:100%; 
}

來源

2014-04-01 17:42:07 Joshua

3的div覆蓋整個窗口

回答

相關問題