Question

我有以下页面：

<body>
<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>



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

我想仅使用具有以下内容的css创建页面：

标题高度= 100px;必须始终位于页面顶部（此部分工作正常）
页脚高度= 60px;必须始终位于页面底部（即使内容不够。如果页面内容或菜单内容很多并且显示浏览器滚动条，则页脚仍然必须位于底部）
菜单必须位于页面左侧，宽度为150像素，其中元素的定义与示例相同（此部分也正常工作）
页面内容应该延伸到剩余空间（它显示为黑色。当所有剩余空间都是黑色而不是黄色时，它应该没问题）

如果更改浏览器窗口大小，页面也应动态更改。该解决方案应该是浏览器兼容的，但如果它适用于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");

Answer 2

怎么样：

#header, #menu, #content, #footer {
  position:fixed;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

#header {
  height:100px;
  z-index:9999;
}

#menu {
  width:150px;
  padding:100px 0 60px; /* account for header, footer */
  z-index:9997;
}

#content {
  padding:100px 0 60px 150px; /* account for header, menu, footer */
  z-index:9996;
}

#footer {
  height:60px;
  top:inherit;
  bottom:0;
  z-index:9998;
}

HTML：

<body>
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>

CSS标题，菜单，内容和页脚位置

2 个答案: