将菜单栏高度设置为整页高度

我的垂直菜单栏的高度与页面其余部分相同，但出现问题。将菜单栏高度设置为整页高度

所以我有这样的

<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

将菜单栏高度设置为整页高度

回答

相关问题