0

#main を 100% にしたいが、 #upper の影響を受けないようにしたい - 39px 押し下げて、ページをスクロール可能にする。オーバーフロー: 下部にあるコンテンツを表示する必要があるため、body に非表示にすることはできません。これを修正するにはどうすればよいですか? スティッキーフッターに似たものですか？私はそれを理解していないようです。

<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 に答える