如何在HTML5中使用100%DIV高度?

时间:2012-12-09 15:14:31

标签: html5 html css

我尝试过很多文章并在SO中使用了很多链接,但我无法修复我的页面CSS。该页面可在此处查看:http://tinyurl.com/d3ru8tf

截图:

enter image description here

我的CSS

html, body {
   height:100%
}

body{
   line-height:1;
   color:#454545;
   background:url(/assets/imgs/bg.png);
   font:11px Tahoma,Arial,sans-serif
}

#soul{
   display:block;
   margin:0 auto;
   width:920px;
   background:url(/assets/imgs/back.png) repeat-y right #fff;
   padding:0;
   position:relative;
   height:100%
}

我的HMTL5

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div id="soul">

          This is my content which does not sit fluid.

       </div>
   </body>
</html>

1 个答案:

答案 0 :(得分:3)

在关闭<hr style="clear:both;" />的{​​{1}}之前添加</div>,并从#soul CSS中删除height:100%

enter image description here

此外,使用#soul或更好,但在这种情况下根本不使用该属性。

修改

详细了解浮动div:http://css-tricks.com/all-about-floats/

此外,您似乎希望它们的高度相等。

enter image description here

看看这个:http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks