How to use 100% height with css

Tags: html,css

Problem :

Attempt #3.

Using css, with a strict doctype, can someone please draw 4 div boxes to meet these requirements.

  1. The wrapper or outermost div will scale in height. That means that it could be any height.
  2. The middle div should always be 100% high to match the outer/parent div (#1 in my list)
  3. The next div should be positioned inside, and at the top of div #2
  4. The last div should be positioned inside, and at the bottom of div #2

NOTES: If you use absolute positioning for this, you will put divs 3 and 4 outside of div #1 and that won't work. The key is to keep divs 3 and 4 within div #2

Solution :

<div id="wrapper">
 <div id="middle">
  <div id="top">top</div>
  <div id="bottom">bottom</div>

#wrapper { height: 200px;  position: relative;  }
#middle { height: 100%;  }
#bottom { position: absolute; bottom: 0; }

It should work for any height you give the #wrapper.

you can play with it here:

    CSS Howto..

    How to display the bottom of an image?

    How can I use CSS to show and hide multiple elements at once?

    How to get 'div' shaped as a flag with CSS

    How to check a website in BlackBerry Simulator

    How to apply a fixed backgound in fullpage.js

    How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?

    How do I center a set of JQuery Mobile radio buttons in the viewport?

    How to assign inner shadow to inputs in CSS

    How to fix inconsistent rendering of adjacent TD borders when they are collapsed?

    How to reposition my jQuery popup?

    How to Use CSS transitions

    How to have a logo in the middle of two menu lists?

    How to get CSS left property value on second element of anchor

    How to change the color of header?

    How to change CSS with jquery?

    How to add a class to select_tag in Ruby on Rails

    How to add multiple CSS styles to an element with .css()

    How to align text below an image in CSS?

    Keyboard Showed messed up elements' position

    how to center a webpage in CSS

    How to change css style by using Unicode Hexadecimal

    CSS menu - main option makes wider when submenu appears - how to fix it?

    How can I avoid div from executing new line if one line is already full?

    How can I make this little javascript work with 2 textarea elements without killing the CSS?

    How to edit the css style of validation ng-class error

    How to change image css after rotating it in JS?

    How to put CSS content in select box and rotate it?

    How do I make the whole area of a list item in my navigation bar, clickable as a link?

    How to execute select() method on polymer elements based on URL?

    How to segment a circle with different colors using CSS