CSS 页眉、菜单、内容和页脚位置

Question

我有以下 HTML 和 CSS:

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

html,
body {
  background-color: yellow;
  height: 100%;
}

#header {
  position: absolute;
  height: 100px;
  width: 100%;
  background: #335599;
  border-bottom-color: #ffffff;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  z-index: 100;
}

#footer {
  height: 60px;
  width: 100%;
  background-color: #dd1155;
  border-top-color: #ffffff;
  border-top-style: solid;
  border-top-width: 1px;
  z-index: 1000;
}

#wrap {
  position: relative;
  height: 100%;
}

#wrap_content {}

.undef {
  width: 100%;
}

.top_h {
  height: 100px;
}

.bottom_h {
  height: 60px;
}

#page_content {
  padding-left: 150px;
  position: relative;
  color: #FFFFFF;
  background-color: #000000;
}

#menu {
  height: 100%;
  position: relative;
  float: left;
  background-color: #1188FF;
  border-right-color: #ffffff;
  border-right-style: solid;
  border-right-width: 1px;
  z-index: 10;
}

#menu ul {
  list-style: none;
  display: block;
  min-height: 200px;
}

#menu ul li {
  width: 150px;
  height: 25px;
  padding-top: 10px;
  padding-bottom: 4px;
  text-align: center;
  background-color: #992277;
  border-bottom-color: #000000;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-family: Cambria;
}

#menu ul li:hover {
  background-color: #167322;
  color: #ffffff;
}

<div id="wrap">

  <div id="header"></div>

  <div class="undef">
    <div class="top_h"></div>

    <div id="menu">
      <ul>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
      </ul>

      <div class="bottom_h"></div>

    </div>

    <div id="page_content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis nibh id odio laoreet, nec bibendum erat auctor. Vivamus imperdiet nisi eget nisl blandit lobortis. Nam vestibulum scelerisque nisi, sit amet fermentum metus dapibus ut. Etiam et volutpat
        eros, sed porttitor elit. Nulla bibendum ornare metus, in venenatis lectus rhoncus sit amet. In hac habitasse platea dictumst. Fusce nibh nulla, rhoncus eget laoreet a, aliquam ac libero. Curabitur tristique porttitor congue. Integer lacinia congue
        orci quis vestibulum. Nulla risus nisi, sodales id augue in, laoreet feugiat orci. Vestibulum fermentum sapien est, eget pretium eros adipiscing vel. Nulla malesuada ornare congue. Suspendisse eget enim et dolor porttitor scelerisque ut eu augue.
        Duis vitae risus quis est rutrum consectetur pharetra ullamcorper lacus. Suspendisse vestibulum auctor mi, in laoreet libero pellentesque ut. Donec a elit at ligula viverra dictum vel feugiat elit.
      </p>


      <div class="bottom_h"></div>
    </div>

  </div>
  <div id="footer"></div>

</div>

我只想使用具有以下内容的 css 创建一个页面:

1. 标题高度 = 100 像素；必须始终在页面顶部(这部分工作正常)
2. 页脚高度 = 60 像素；必须始终位于页面底部(即使没有足够的内容。如果页面内容或菜单内容过多并且显示浏览器滚动条，则页脚仍必须位于底部) .
3. 菜单必须位于页面左侧，宽度为 150px，元素定义如示例中(这部分也可以正常工作)
4. 页面内容应在剩余空间上延伸(以黑色显示。当所有剩余空间都为黑色而不是黄色时，应该可以)

如果浏览器窗口大小发生变化，页面也应该动态变化。该解决方案应与浏览器兼容，但如果它适用于 firefox 或/和 chrome，则一切正常。

我尝试使用很多技巧来做到这一点，但没有一个奏效。是否可以只使用 css 2.0 做这样的事情？

Answer 1

这是我的决议:http://jsfiddle.net/6rVsE/

2

添加到#footer:

position:fixed; bottom: 0px;

3

添加到:#menu:

width: 150px;

添加到:#menu ul li:

width: 100%;

4

因为你做的是相对的:我会用 Javascript 解决这个问题。这个例子使用的是 jQuery。

$("#page_content").css("height", $(window).height() - $("#header").height() - $("#footer").height() +"px");