Question

出于某种原因，如果我对其应用边框，.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％的高度？

Answer 1

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

Answer 2

我尝试了您的代码并使用开发人员工具检查了Chrome。对我来说，即使没有边框，你的.container也是100％的高度。使用此代码，您可以看到它没问题。

    background: red;

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

Answer 3

..因为你的容器没有将你的内部元素的默认边距保持为hx，p等......

Border会以填充的方式处理。

然后您可以使用：

.container {
   padding:1px;
   box-sizing:border-box;
   }

Answer 4

给你的容器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;

}

100％的高度不起作用

4 个答案: