Home/ Questions/Q 7948563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:45:27+00:00

I want #main to be 100%, but not affected by #upper — pushed down

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0