Question

当我在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>

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％

1 个答案: