内容从 div 溢出，高度为 100%

Question

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

我尝试将 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>

Answer 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>

内容从 div 溢出，高度为 100%

Content overflows from div with 100% height

html

css