CSS Div佈局拉伸以適應寬度和高度

我想要製作一個phpBB主題，但是我設置DIV的方式與我設想的頁面的方式一樣有困難。CSS Div佈局拉伸以適應寬度和高度

這就是我期待的。

這是我有這麼遠。

的index.html

<body> 
<div id='container'> 
    <div id='header'> 
    </div> 

    <div id='sidemenu'> 
    </div> 

    <div id='content'> 
    </div> 
</div> 

</body>

css.css

*{ 
    padding: 0px; 
    margin: 0px 
    } 

#header { 
    width:100%; 
    height:50px; 
    background-color:#6FF; 
    } 

#sidemenu { 
    display: block; 
    position:absolute; 
    width:100px; 
    height:100%; 
    background-color:#6F6; 
    }

這樣做的問題是，sidemenu DIV溢出到頁面的底部，並創建一個滾動條。

我試圖尋找一個解決方案，只有設法讓溢出利用bottom:0px;的sidemenu CSS

內消失，但這種推頭右側，sidemenu到左上角像這個..

http://imgur.com/LKk9VtF

我困在這裏，CSS給了我一個巨大的頭痛ahaha。任何人都可以請幫我解決方案？

非常感謝！

來源

2014-09-20 John Doe

您應該使用height:calc(100% - 50px); top:50px;爲您的sidemenu。運行下面的代碼段。

*{ 
 
    padding: 0px; 
 
    margin: 0px 
 
    } 
 

 
#header { 
 
    width:100%; 
 
    height:50px; 
 
    background-color:#6FF; 
 
    } 
 
html,body,#container{height:100%;} 
 

 
#sidemenu { 
 
    display: block; 
 
    position:absolute; 
 
    width:100px; 
 
    height:calc(100% - 50px); 
 
    top:50px; 
 
    background-color:#6F6; 
 
    }

<div id='container'> 
 
    <div id='header'> 
 
    </div> 
 

 
    <div id='sidemenu'> 
 
    </div> 
 

 
    <div id='content'> 
 
    </div> 
 
</div>

來源

2014-09-21 00:02:45

是美麗，謝謝！不知道你可以在CSS中做到這一點。我希望它是跨瀏覽器友好的。 – 2014-09-21 00:18:02

http://caniuse.com/#feat=calc IE9 + – 2014-09-21 00:20:03

CSS Div佈局拉伸以適應寬度和高度

回答

相關問題