以下代码正常工作
<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%; /* !!!!! difference in here */
}
div#main {
min-height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
而使用min-height
而不是height
for body的代码可以防止 #main 占用空间
<!DOCTYPE html>
<html>
<head>
<title>Not working</title>
<style type="text/css">
html {
height: 100%;
}
body {
min-height: 100%; /* !!!!! difference in here */
}
div#main {
min-height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
奇怪的是,在使用 chrome 进行检查时,在这两种情况下,主体都正确占用了 100% 的空间。但是min-height
,如果子元素min-height: 100%;
转换为 0。为什么会发生这种情况,是否有任何解决方法?我希望我的网页背景的最小高度能够正常工作并根据需要扩展。