Html 100%高度赢得'；行不通

出于某种原因，如果我对

.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%的高度吗？

我尝试了您的代码，并使用开发人员工具在Chrome中进行了检查。对我来说，你的集装箱是100%的高度，即使没有边界。 使用此代码，您可以看到它是正确的

    background: red;

---

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

。。因为您的容器不包含内部元素的默认边距，例如hx、p等

Border将起到填充的作用

然后，您可以使用：

---

实际上，100%的高度在代码中起作用。只是没有边界你看不见。如果您想检查它，请在Chrome中按F12并将html元素悬停以查看html元素的正确高度和宽度。如果仍然存在一个问题，那么考虑将100%的高度应用到<代码>。这将带来一些变化。但是如果没有开发工具，你仍然看不到100%的高度。

给你的容器

位置：relative

，并用

边距：auto使你的内框绝对居中；位置：绝对顶部：0；底部：0；左：0；右：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%我们没听清你说的话它已经开始工作了看这里哈哈，我想他是说边界被切断了，因为我在这里看到过很多次，边界显示在你的高度和宽度之外100%，所以只能在顶部和顶部看到left@tmyie在您的网站上，第一个容器的高度为100%。但是，第二个容器中的innerbox的顶部边距为-300px，这导致它与第一个容器重叠300px！在这里它是活的，但不工作：我复制和粘贴，但它似乎打破了页面。我现在刚刚删除了
页边距顶部
，但我需要它来将
置于每个
中的
内框
居中。容器
我已经更新了我的代码，现在查看它是否工作，只需将上面的两个代码替换为原始代码。确实有效！你能告诉我所做的改动吗？
.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;

}