内容从 100% 高度的 div 溢出答案

【问题标题】：Content overflows from div with 100% height内容从 100% 高度的 div 溢出
【发布时间】：2015-01-08 06:12:28
【问题描述】：

当我在 Chrome、Firefox 或 IE11 中查看此页面时，我注意到将窗口水平调整为最小宽度会导致页面底部的白色背景 div 溢出文本。 div设置为100%的高度，难道不应该继续匹配页面的高度吗？看起来 100% 仅与窗口的高度匹配，但在 Chrome 中最初加载页面时，我看到白色 div 会导致滚动条，因此有更多的空白区域超出了窗口的高度。

我尝试将overflow: auto; 放在#main css 中，然后 div 以滚动条结束。我删除了它，因为它不是我可以接受的解决方案。如何让 div 自动适应其内容？

<html>
<head>
<style>
    body, html {
        margin: 0;
        padding: 0;
    }
    html { 
        background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed; 
        background-size: cover;     
    }
    #main {
        margin-left: 20%;
        margin-right: 20%;
        background-color: white;
        height: 100%;
        padding: 10%;
    }
</style>
</head>
<body>
    <div id="main">
        <h1>The Road Not Taken</h1>
        Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference.
        <p>- Robert Frost</p>
    </div>
</body>
</html>

【问题讨论】：

也许我理解错了，但是我在调整codepen.io/anon/pen/PwWNeJ时没有看到任何滚动条@
@jessikwa 我删除了溢出：自动 - 这不是我可以接受的解决方案。
@jessikwa 在您的代码笔中，我没有看到同样的问题。我确实看到它是在 html 文件中创建页面并在浏览器中本地查看时。
1) 文本只会水平溢出如果单词比白色容器宽。 2）垂直文本不会溢出白色容器。您期望设备的最小宽度是多少？现在你能再解释一下你的问题吗？谢谢。（这是我在阅读您的问题后创建的 jsBin：jsbin.com/suyafa/1/edit）

标签： html css

【解决方案1】：

padding 会搞砸height: 100%。它似乎计算了高度，然后添加了填充，因此得到的高度实际上更接近 120%。我在本地 html 文件中尝试了这段代码，它似乎可以解决问题。

试试这个：

<html>
<head>
<style>
    body, html {
        margin: 0;
        padding: 0;
    }
    html { 
        background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed; 
        background-size: cover;     
    }
    #main {
        margin-left: 20%;
        margin-right: 20%;
        background-color: white;
        height: 100%;
    }
    #content {
        padding: 10%;
    }
</style>
</head>
<body>
    <div id="main">
        <div id="content">
            <h1>The Road Not Taken</h1>
            Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference.
            <p>- Robert Frost</p>
        </div>
    </div>
</body>
</html>

【讨论】：

我找到了另一种解决方案 - 将 display: table; 添加到 #main 选择器中，它完全可以工作。但是，我怀疑您的方法是更好的方法。我可以在其他地方读到关于 table display 的信息，但是你知道我为什么要避免 display: table 在这种情况下的任何原因吗？
老实说，我不太了解它，无法为您提供很多充分的理由。据我了解，一个缺点是一些较旧的浏览器不支持它。您可以检查 here 的兼容性。此外，this site 就为什么 display: table 不是一个好主意提出了一个有争议的论点。同样，我对此知之甚少，无法同意或不同意他的观点，但也许它会帮助您做出决定。希望有帮助！ =)
这是两个重要的原因，我仍然认为你的方法是最好的。谢谢你回到我身旁。保重。