Question

我尝试了以下代码：

<!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％的边界？

Answer 1

您需要为html和body提供一个高度：

body, html{
    height: 100%;
}

Answer 2

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

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

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

如果你确实浮动它们，你将无法通过填充或边距来获得两个50％的div，除了div的宽度/高度之外还有填充和边距。

您可能想要阅读css box model。

如何让DIV块填满我的屏幕90％？

2 个答案: