0

我希望#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

4

3 回答 3

3

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

于 2012-05-17T19:51:59.853 回答
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;
}
于 2012-05-17T19:49:25.390 回答
0

尝试将 #upper 更改为：

#upper
{
    height: 39px;
    width: 100%;
    background: #212121;
    position:absolute;
    left:0;
    top:0;
}
于 2012-05-17T19:58:03.860 回答