Set div block to 100% height

Question

i have markup like this:

<html>
<body>
  <div class="page">
      <div class="top_menu">
        some text
      </div>
      <div class='header'>
         menu
      </div>
      <div class="main">
          <div class="left_sidebar">
             left
          </div>
          <div class="content">
             left
          </div>
          <div class="right_sidebar">
             right
          </div>
      </div><!-- main div -->
   </div> <!-- page div -->
</body>
</html>

I need to set block .main to 100% page height, this is my css:

html {
    height: 100%;
}
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.page {
    height: 100%;
    min-height: 100%;
    background-color: white;
    margin: 0 auto;
    padding: 0;
    width: 1084px;
}
.main {
  width: 1084px;
  height: 100%; // not working
}
.left_sidebar {
  float: left;
  max-width: 197px;
  height: auto;
}
.content {
  width: 517px;
  float: left;
}
.right_sidebar {
  width: 359px;
  float: right;
}

Right now text inside .main shown beyond the block and in Chrome i can see that width of this block is 1084 but height is 0. I know maybe this issue has already been asked, but i think i missed something.

Searched over internet tried this solution, did not worked for me

just tried different options, with examples of which are found on the internet, and i am not missing `"` edit — Petro Popelyshko, Feb 14 '13 at 11:34
This will help you out to get it fix... http://stackoverflow.com/questions/1622027/percentage-height-html-5-css — Kingk, Feb 14 '13 at 11:43
I've edited my answer below to include a fix for all modern browsers. Michal's solution is severely flawed in that when content reaches the limit of the container it will be hidden. The (entirely CSS) solution I've given will scroll as necessary, but not show scrollbars when it shouldn't. — James Donnelly, Feb 14 '13 at 12:19

Mike · Accepted Answer · 2017-11-21T08:49:34.180

Try using this http://jsfiddle.net/7cZMh/2/

HTML

<html>
<body>
  <div class="page">
      <div class="top_menu">
        some text
      </div>
      <div class='header'>
         menu
      </div>
      <div class="main">
          <div class="left_sidebar">
             left
          </div>
          <div class="content">
             left
          </div>
          <div class="right_sidebar">
             right
          </div>
      </div><!-- main div -->
   </div> <!-- page div -->
</body>
</html>

CSS

html{
    min-height: 100%;
    position: relative;
}
body{
    height: 100%;
    overflow: hidden; // hide overflow
}
.page{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: maroon;
}
.main {
    height: 100%;
    background: black;
    overflow: auto; // restore overflow
}

Oops, forgot this.

.left_sidebar {
  float: left;
  max-width: 197px;
  height: auto;
}
.content {
  width: 517px;
  float: left;
}
.right_sidebar {
  width: 359px;
  float: right;
}

This solution has a big flaw in that using `overflow:hidden;` will hide content. (Example: http://jsfiddle.net/7cZMh/3/) To fix this you need to use margins and padding, but your original question stated nothing about not having scrollbars. — James Donnelly, Feb 14 '13 at 11:50
@JamesDonnelly You are right (partially), but it's not necessary to add margins or padding. I adjusted the CSS to properly handle the overflow in content block. — Mike, Nov 21 '17 at 08:52

James Donnelly · Answer 2 · 2013-02-14T12:17:23.777

1

Combining your HTML and Body tags into one and removing min-height seems to fix it:

html, body { height:100%; margin:0; padding:0; }

JSFiddle.

If you weren't wanting scrollbars you can use the CSS3 border-box property and mess around with margins and padding, like so: new JSFiddle. This should work in all modern browsers (nothing below IE8.0).

edited Feb 14 '13 at 12:17

answered Feb 14 '13 at 11:35

James Donnelly

126,410
34
208
218

It causes scrollbar to appear. – Mike Feb 14 '13 at 11:45
Of course it does. If the page is 800px high and the element is set to 100% height, the element will be 800px high. Nowhere in the original question does it state that scrollbars shouldn't appear. – James Donnelly Feb 14 '13 at 11:46

score 0 · Answer 3 · answered Feb 14 '13 at 11:34

0

Use javascript to give height after on pageload

give id to div

<div class="page" id="myDiv">
....
</div>

And add this script before closing the body tag.

<script type="text/javascript">
document.getElementById("myDiv").style.height=screen.height;
</script>

answered Feb 14 '13 at 11:34

Shafeeq Koorimannil

724
5
14

i think this bad idea, i want to do it in css – Petro Popelyshko Feb 14 '13 at 11:35

Set div block to 100% height

3 Answers3

Linked