0

出于某种原因，.container如果我对其应用边框，则它只是浏览器窗口的 100%。它只是这里是代码，没有边框：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
}

.container {
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    display:block;

}

HTML 很简单

<div class="container">
    <div class="inner_box">
        <div class="text_box">Project Three</div>
        <ul>
            <li>content</li>
        </ul>
    </div>
</div>

有谁知道为什么我需要 .container 上的边框才能使其达到 100% 的高度？

4

4 回答 4

1

实际上 100% 高度在您的代码中起作用。只是没有边界是看不到的。如果要检查它，请在 Chrome 中按 F12 并将 html 元素悬停以查看 html 元素的正确高度和宽度。如果仍然存在问题，请考虑将 100% 高度应用于.inner_box类。它会做出一些改变。但是如果没有开发人员工具，您仍然无法看到 100% 的高度。

于 2013-08-30T11:15:26.223 回答
0

我尝试了您的代码并使用开发人员工具检查了 Chrome。对我来说，即使没有边框，您的 .container 也是 100% 的高度。有了这段代码，你可以看到一切正常。

    background: red;

将它添加到您的容器类中，您会看到。

于 2013-08-30T10:57:57.510 回答
0

..因为您的容器不保存内部元素的默认边距，如 hx 、 p 等...

边框将起到填充作用。

然后您可以使用： 

.container {
   padding:1px;
   box-sizing:border-box;
   }
于 2013-08-30T11:13:02.130 回答
0

给你的容器position:relative，让你的内盒绝对居中margin: auto; position:absolute top:0; bottom: 0; left: 0; right: 0;

.container {
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    display:block;
    overflow: auto;
    position: relative;

}

.inner_box {
    width: 800px;
    height: 600px; 
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
    background-color: #f1f1ee;

}
于 2013-08-30T11:15:53.567 回答