ncla ncla - 20 days ago 5
CSS Question

CSS - body 100% with two divs, one with 100% height and second is fixed height

I want #main to be 100%, but not affected by #upper -- pushed down by 39px and making the page scrollable. Overflow: hidden on body won't do it for me, since I need to see content at the bottom. How do I fix this? Something similar to sticky footer, or? I don't seem to understand it.

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


Picture of how it looks http://i46.tinypic.com/25k1jcn.jpg

Answer

An alternative to @Zoltan's answer:

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>