Question

我的垂直菜单栏的高度与页面其他部分的高度相同。

所以我喜欢这个

<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的内容比菜单“更长”时，菜单不会变长。请帮忙。

Answer 1

使用flex并且不要忘记保证金

这是一个例子，它在stackoverflow上下文中看起来不是很好，但在独立它有效（有）

＆＃13;

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;
  }

＆＃13;

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

＆＃13;

对于今天而言 - FLEX是唯一的现代布局CSS 3.0工具，可用于类似应用程序的布局和单屏网站。浮动，网格和javascript on-resize hacks现在是老派。大多数浏览器提供有效的flex - ***支持 - Mozilla，Chrome，IE9（！），Opera - 适用于PC和移动版本。

关于flexes你可以在这里看到（开始）：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

菜单栏的Z-index为2，内容为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-index数字，所有其他元素确保始终可以看到它。

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

2 个答案: