Question

我希望#main为100％，但不受#upper的影响 - 按下39px并使页面可滚动。溢出：隐藏在身体上不会对我有用，因为我需要在底部看到内容。我该如何解决？类似于粘性页脚的东西，或者？我似乎不明白。

<body>
<div id="upper"></div>
<div id="main">
    <div id="box"></div>    
</div>
</body>

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
}
#upper {
    height: 39px;
    width: 100%;
    background: #212121;
}
#main {
    display: block;
    width: 100%;    
    min-height: 100%;
    margin: 0 auto;
    background: blue;
}

它的外观图片http://i46.tinypic.com/25k1jcn.jpg

Answer 1

@ Zoltan回答的另一种选择：

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
}
#upper {
  height: 39px;
  width: 100%;
  background: #212121;
  position: fixed;
  top: 0;
  left: 0;
}
#main {
  display: block;
  width: 100%;    
  margin: 0 auto;
  background: lightblue;
  position: fixed;
  top: 39px;
  bottom: 0;
}

<div id="upper"></div>
<div id="main">
  <div id="box">Hi</div>    
</div>

Answer 2

试试这个 - http://jsfiddle.net/ax7nq/

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
}
#upper {
    height: 39px;
    width: 100%;
    background: #212121;
    position: absolute;
}
#main {
    display: block;
    width: 100%;    
    min-height: 100%;
    margin: 0 auto;
    background: lightblue;
}

#box {
    padding-top: 39px;
}

Answer 3

尝试将#upper更改为：

#upper
{
    height: 39px;
    width: 100%;
    background: #212121;
    position:absolute;
    left:0;
    top:0;
}

CSS - 身体100％有两个div，一个有100％高度，第二个是固定高度

3 个答案: