How to make a div use 100% available height (minus

2019-07-01 10:51发布

站内问答 / HTML/CSS
1018 2 5

I have this HTML:

<body>
<div id="logo">
    <table id="width100" cellpadding="0" cellspacing="0"  >
        <tr>
            <td width="33.33%" align="left">&nbsp;</td>
            <td width="33.34%" align="center"><a href="http://www.rawgameshop.com/"><img src="images/logo_new.png" /></a></td>
            <td width="33.33%" align="right"><img src="images/logo_right.png" /></td>
        </tr>
        <tr bgcolor="#731000" id="width100">
            <td height="15" colspan="3" ></td>
        </tr>
    </table>
</div>

<center>
<div id="container">
    <div id="main_body">
        asd
    </div>
</div>
</center>

And this CSS:

body {
    width:100%;
    height:100%;
    margin:0px;
    background-color:#ECECEC;
}

#logo {
    width:100%;
    height:165px;
    background-color:#FFFFFF;   
}

#width100 {
    width:100%;
}

#container {
    background-color:#FFFFFF;
    height:100%;
    width:900px;
}

#main_body {
    width:800px;
    background-color:#FFFFFF;
    height:100%;
}

My question is: why doesn't my main_body div stretch down across the middle of the page? It is only as tall as the letters.

If I remove the <center> HTML tags it does stretch down, but at 100% screen size, that means I have to scroll down to the end. I wanted it to be to the edge of the screen, not further.

标签： css html height
举报
2条回答
Luminary・发光体
2楼-- · 2019-07-01 11:04

Add height:100% to html,body and remove <center> tag instead use margin:0 auto to #container

  html,body{height:100%}
  #container {
    background-color:red;
    height:100%;
    width:900px; margin:0 auto
  }
  #main_body {
    width:800px;
    background-color:#FFFFFF;
    height:100%; margin:0 auto
  }

DEMO

For that issue change the html like this,

  • Add an outer div to entire markup, make it position:relative and give position:absolute to container div
  • use z-index to push the container div below the logo div.
  • Finally add an empty div inside the #main_body to give the height(same as logo div height)

HTML

<div id="wrapper">
<div id="logo">
   logo html
</div>
<div id="container">    
    <div id="main_body">
        <div class="space"></div>
        asd
    </div>
</div>
    </div>

CSS

#wrapper{
    height:100%; 
    background:grey; 
    position:relative; 
}
#container {
   background-color:red;  
   height:100%;
   width:900px; 
   margin:0 auto; 
   position: absolute;
   top: 0; bottom: 0; left: 0; right: 0; 
   z-index:1;
}
#main_body {
   width:800px;  
   background-color:#FFFFFF;
   height:100%; 
   margin:0 auto; 
}
.space{height:165px}

DEMO 2

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-07-01 11:18

height:100% takes the height of the first parent element that has a height set on it. As all your parent objects have a percentage height on it will go right up to the body and take 100% of that height.

You will either need to set #logo as a percentage height and then your main_body as the rest of the percentage otherwise you will need javascript / jquery to resize your main_body as css hasn't enabled a way to do calculations yet (although I think it may be coming soon)

Have a look at this post as they were trying to achieve the same thing:

Calculate value with CSS3

If you are going the jQuery route you will need to add the jquery library to your page (I usually put this at the bottom of the page) and then anywhere after this you need to include your script you are going to run like so:

<script type="text/javascript">
  $(document).ready(function () { 
    var newHeight = $(window).height() - $('#logo').height();
    var oldHeight = $('#container').height();

    if (newHeight > oldHeight) {
      $('#container').height(newHeight);
    }
  });
</script>

the $(document).ready(function(){}) means that anything that is within the function will be fired once the document (web page) has finished loading

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)