將菜單欄高度設置爲整頁高度

我的垂直菜單欄的高度與頁面其餘部分相同，但出現問題。將菜單欄高度設置爲整頁高度

所以我有這樣的

<div id="header">Site title etc</div> 
<div id="pagecontent"> 
    <div id="menubar">Menu buttons<div> 
    <div id="pageinnercontent">Contents of the page</div> 
</div>

有了這個CSS：

html { 
    min-height:   100%; 
} 
body { 
    min-height:    100%; 
} 
#pagecontent{ 
    position:   absolute; 
    width:    100%; 
    min-height: 100%; 
} 
#menubar{ 
    height:    100%; 
    position:   absolute; 
    width:    170px; 
    background-color: #404040; 
    color:    white; 
    float:    left; 
    bottom:   0; 
} 

#pageinnercontent{ 
    width:    calc(100% - 170px); 
    left:    170px; 
    position:   absolute; 
}

但是，它不工作。當pageinnercontent的內容比菜單「更長」時，菜單不會變長。請幫忙。

來源

2014-12-20 Mbrouwer88

適合我。檢查你的HTML的結構。 –

使用Flex，不要忘了保證金

下面是一個例子，它沒有看起來完全做好計算器背景，但在獨立它是有效的（帶）

html { 
 
    margin:0; 
 
    height:100%; 
 
    width:100%; 
 
    } 
 
body { 
 
    
 
    display:flex; 
 
    flex-direction:row; 
 
    height:100%; 
 
    width:100%; 
 

 
    } 
 
.menu { 
 
    min-width:300px; 
 
    background-color:red; 
 
    border:solid 3px black; 
 
    min-height:100%; 
 
    } 
 
.main { 
 
    background-color:yellow; 
 
    border:solid 3px blue; 
 
    min-height:100%; 
 
    flex:1; 
 
    }

<html> 
 
    <body> 
 
    <div class="menu"> 
 
     Menu Is Here 
 
     </div> 
 
    <div class="main"> 
 
     Main Is Here 
 
     </div> 
 
    </body> 
 
</html>

今天 - FLEX是唯一的現代佈局CSS 3.0設施，用於類似應用程序的佈局和單屏幕網站。目前，浮動，柵格和javascript調整大小黑客是老派。大多數瀏覽器都提供了有效的flex-***支持 - Mozilla，Chrome，IE9（！），Opera - 都適用於PC和移動版本。

關於彎曲U可以在這裏看到（用於啓動）：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2014-12-20 18:47:04

謝謝，使用flex，現在它工作！ – Mbrouwer88

只爲菜單欄的內容做的2 Z-指數和1。這可以確保菜單欄始終處於頂層。

html { 
 
    height:   100%; 
 
} 
 
body { 
 
    height:    100%; 
 
} 
 
#pagecontent{ 
 
    position:   absolute; 
 
    width:    100%; 
 
    min-height: 100%; 
 
    z-index: 1; 
 
    background-color: red; 
 
} 
 
#menubar{ 
 
    height:    100%; 
 
    position:   absolute; 
 
    width:    170px; 
 
    background-color: #404040; 
 
    color:    white; 
 
    float:    left; 
 
    top: 0; 
 
    bottom:   0; 
 
    z-index: 2; 
 
} 
 

 
#pageinnercontent{ 
 
    width:    calc(100% - 170px); 
 
    left:    170px; 
 
    position:   absolute; 
 
}

<div id="header">Site title etc</div> 
 
<div id="pagecontent"> 
 
    <div id="menubar">Menu buttons<div> 
 
    <div id="pageinnercontent">Contents of the page</div> 
 
</div>

注隨着當前結構和CSS確保菜單延伸至底部，並且所有其它元件可確保它總是看到較高的Z-索引號。

來源

2014-12-20 18:58:47

將菜單欄高度設置爲整頁高度

回答

相關問題