1

我尝试了以下代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 90%;
            width: 50%;
            padding: 2em;
        }
        #right-content {
            height: 90%;
            width: 50%;
            padding: 2em;
        }
    </style>

    <div id="outer" style="display: block">
      <div id="left-content" style="display: block">xx</div>
      <div id="right-content" style="display: block">xx</div>
    </div>

</body>
</html>

然而，外部 DIV 仍然没有填满屏幕的大部分。我怎样才能让这个 DIV 填充 90% 并只留下 5% 的边框？

4

2 回答 2

4

你需要给你html和body一个高度：

body, html{
    height: 100%;
}
于 2013-01-08T01:40:50.907 回答
0

您需要将文档和正文设置为 100% 宽度/高度。

body,html
{
width:100%;
height:100%;
}

作为旁注，如果你真的想要一个在左边和一个在右边，你的内部 div 需要使用 float 属性。那个或一些像素完美的偏移量。

如果你浮动它们，你将无法摆脱两个 50% 的带有填充或边距的 div，填充和边距是 div 的宽度/高度之外的。

您可能想阅读css box model。

于 2013-01-08T01:51:30.243 回答