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

问题描述 投票：0回答：2

我有以下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. 标题高度= 100px；必须始终位于页面顶部（此部分工作正常）
  2. 页脚高度= 60像素；必须始终位于页面底部（即使页面内容不足。如果页面内容或菜单必须包含很多内容，并且显示了浏览器滚动条，则页脚仍必须位于页面底部） 。
  3. 菜单必须在页面的左侧，并且宽度为150px，其中的元素如示例中所定义（此部分也可以正常工作）
  4. 页面内容应在剩余空间上扩展（显示为黑色。如果所有剩余空间均为黑色而不是黄色，则应该可以）

此外，如果更改浏览器窗口大小，则页面也应动态更改。该解决方案应该与浏览器兼容，但如果它适用于Firefox或/和chrome，则一切正常。

我尝试使用很多技巧来做到这一点，但是没有一个起作用。是否可以仅使用CSS 2.0做类似的事情？

css header css-position footer
2个回答
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");
1
投票

怎么样：

#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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.