Clever Geek Handbook

Force <div> to fill all available vertical spaces

I've seen a bunch of ways to do this online, but everything I've tried either broke other CSS on the page or didn't work all together.

From this page http://www.psyklopz.com/workbench/ I want the #container element to grow in height so that the footer touches the bottom of the screen.

How do you do it?

+3


source to share


6 answers


I ended up using position: fixed;

and installing bottom: 0; top: 0; left: 0;

. Then I used a piece of jQuery magic .animate()

to pull it out. Here's a working code and an all-in-one demo! http://www.psyklopz.com/workbench/jquery-based-dock-toolbar/



0


source


You can also do:

Html

<body>
    <div id="container"></div>
    <div id="footer"></div>
</body>


Styles

html,body {height: 100%;}
body{ position: relative;}
#footer { position: absolute; bottom: 0;}

The container container won't stretch all the way down, but with clever use of BG colors, you can make it look like it does.

+2


source


I attended this spectacle. It's good if your content is just as short and you want to place the footer at the bottom of your screen. add this to your css div or container you want to be at the bottom.

position: absolute;
left: 0;
right: 0;
bottom: 0;
+1


source


Hi see demo: -

http://jsfiddle.net/BER5x/2/

you can use this code, its fixed at the bottom, and without the footer top image, its fully constrained css border property, you dont need to use the footer in your css.

Hope this helps you ...

0


source


I know this is an old post, but I ran into a similar problem today.

I wanted to have a container (with a map) to fill the viewport, but there had to be a 32px container above it. The map made it necessary to really expand the container to its maximum size and not overlap with anything else. I ended up using a flexible and elegant solution without javascript:

<div class="tab"><div class="tabContent" /></div
<div class="container" />

And the CSS:

.tab {
  height: 0;
  width: 100%;
}
.tabContent {
  height: 32px;
}
.container {
  height: 100%;
  padding-top: 32px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

The trick is using the box size: border-box to make the height: 100% include some padding.

I also created a jsfiddle: http://jsfiddle.net/YWLLM/2/ I had to use fixed body height in fiddle because (at least in chrome) at iframe height: 100% didn't work. I also added some borders to visualize that nothing is being clipped (with container overflow: hidden)

0


source


Add height:100%;

to div #page

and #contain

. This will give you what you want.

-1


source






More articles:


All Articles