Databases
StackOverflow2013
Postsdbo
POSet the height property of a DIV on a page that has a "footer"
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSet the height property of a DIV on a page that has a "footer"
    text
    copied!<p>Basically I want to have that middle blue body part scroll minus the scrollbar at the bottom. I know I can do this with javascript, i'm looking for more of a CSS solution.</p> <p>On my actual site I have a div that is about 150px high that contains icons/images to do things and then the rest of the content needs to be scrollable vertically too, I want to find a solution for that too. I can cross that bridge next though.</p> <p>So is there a way I can get that scrollbar to not "overflow" that bottom 30px? I know I can simulate it with another DIV there ( <a href="https://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div">How to create div to fill all space between header and footer div</a> ) but i'm going to be dynamically adding/removing elements so that really isn't a usable solution for me.</p> <p>Here is an example of a page I threw together trying to explain what I'm attempting here:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Testing Page&lt;/title&gt; &lt;style TYPE="text/css"&gt; HTML { height:100%; overflow:hidden; } BODY { height:100%; margin:0; overflow:hidden; } DIV#content { height:100%; margin-bottom:-30px; background-color:blue; overflow:auto; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="height:20px;background-color:green;width:100%;"&gt;top bar&lt;/div&gt; &lt;div id="content"&gt; main area &lt;div style="height:2000px;width:500px;background-color:yellow;"&gt;cool kids&lt;div&gt; &lt;/div&gt; &lt;div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;"&gt;bottom bar&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>thanks for your help.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload