and*_*rei 13 css height google-chrome
我有一个方面的问题,div在Chrome中不会达到100%的高度.它在FF中运行得很好.
我正在使用:
html, body {
padding: 0px;
width: 100%;
height: 100%;
}
#div {
min-height: 100%;
}
这是为什么 ？
Dia*_*tis 12
这对我来说非常适合每个浏览器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>min-height test</title>
<style type="text/css">
html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
#div { min-height: 100%; background-color: gray; }
</style>
</head>
<body>
<div id="div">test</div>
</body>
</html>
你能提供更多细节吗？
编辑
以下是基于提供的信息的更新版本:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>min-height test</title>
<style type="text/css">
html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; }
.contents { height: 100%; width: 780px; margin-left: auto;
margin-right: auto; text-align: left; }
#right { float: left; width: 217px; min-height: 100%; background:#4b805b; }
</style>
</head>
<body>
<div class="contents">
<div id="right">test</div>
</div>
</body>
</html>
Chrome,Firefox和IE8的一切看起来都不错
Sjo*_*erd 10
来自http://doctype.com/give-two-nested-divs-100-minheight:
仅当明确指定子元素时,子元素才会继承父容器的高度.但是最小高度不是高度的明确规范,因此计算出的高度是"自动"而不是100%.
您必须指定您的父母以及孩子的身高为 100%，以便
html,body{
height: 100%;
}
#div{
min-height: 100%;
height: auto !important;
height: 100%; /*for IE*/
}
!important 将覆盖所有其他高度规则。尝试一下应该不会有问题。
| 归档时间： |
|
| 查看次数： |
46376 次 |
| 最近记录： |