很抱歉一直问同一个问题的不同版本，但这似乎很难实现。这是我到目前为止的代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
}
#outer {
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
现在我似乎看到了滚动条，但我只希望外部 DIV 占据屏幕的 90%，并且没有滚动条。
找到 fiddle here .
最佳答案
这是一个我从未见过的非常有趣的错误。不用讨厌的 body { overflow:hidden; } 方法，我找到了一些修复方法:
1 - 使用 display:inline-block(不是真正想要的)
#outer {
display:inline-block;
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
2 - 使用填充而不是边距(不是真正想要的)
#outer {
width: 90%;
height: 90%;
padding: 5% 5% 5% 5%;
background-color: #333;
}
3 - 使用绝对位置(推荐)
#outer {
position:absolute;top: 5%;bottom: 5%;right: 5%;left: 5%;
background-color: #333;
}
我将在进一步调查此问题时编辑此答案。
根据 http://www.w3.org/TR/CSS2/box.html#box-dimensions
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.
这意味着通过将 90% 的宽度放在 body 上，将导致 5% 的边距成为 90% 中的 5%，而不是预期的 100%，这会导致“错误”。 - 同样适用于填充。
关于html - 如何在其中放置一个包含两个 DIV 的 DIV，以便 DIV 填充屏幕的 90%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14207600/