Set div block to 100% height

问题

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

回答1:

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;
}

回答2:

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>

回答3:

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).

来源：https://stackoverflow.com/questions/14873776/set-div-block-to-100-height

标签

html

css

height