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

标签 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>

最佳答案

添加<hr style="clear:both;" />关门前</div>#soul并删除 height:100%来自 #soul CSS。

enter image description here

此外,使用 min-height:100% ,或者更好的是,在这种情况下根本不要使用该属性。

编辑

阅读更多关于 float div 的信息:http://css-tricks.com/all-about-floats/

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

enter image description here

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

关于html - 如何在 HTML5 中使用 100% DIV 高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13788678/

相关文章:

html - 使 HTML 内容扩展以填充窗口

javascript - 在按钮点击 block 上调用 JS 函数 CSS :hover

html - 我想在模块中使用的 css 放在哪里?

html - Google Chrome 指定一个文本字段作为密码字段

javascript - 通过 jquery 动态添加的输入字段未提交

javascript - 尽管我使用 javascript 将其设置为不显示,但下拉列表中的第一个选项得到了修复

HTML DIV 溢出,如何停止?

python - 在 Flask 中通过 SQL 数据库格式化表

jquery - 使用 Bootstrap 和 Aurelia 附加的井的随机移动

html - 响应式网站内容