内容从 100% 高度的 div 溢出 [英] Content overflows from div with 100% height
问题描述
当我在 Chrome、Firefox 或 IE11 中查看此页面时，我注意到在将窗口水平调整到其最小宽度时会导致文本从页面底部的白色背景 div 溢出.div被设置为100%的高度，那么它不应该继续匹配页面的高度吗?似乎 100% 仅与窗口的高度匹配，但是在 Chrome 中最初加载页面时，我看到白色 div 导致滚动条，因此有更多的空白区域超出了窗口的高度.
我尝试将 overflow: auto; 放在 #main css 中，div 以滚动条结束.我删除了它，因为它不是我可以接受的解决方案.如何让 div 自动容纳其内容?
<头><风格>正文，HTML {边距:0；填充:0；}html {背景:url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') 无重复中心中心固定；背景尺寸:封面；}#主要的 {左边距:20%；右边距:20%；背景颜色:白色；高度:100%；填充:10%；}</风格><身体><div id="main"><h1>未选择的路</h1>两条路在黄色的树林中分叉 抱歉我不能同时旅行 作为一个旅行者，我站了很长时间 并尽我所能地俯视其中一条 到它在灌木丛中弯曲的地方；然后拿了另一个，同样公平，也许有更好的要求，因为它长满青草，需要磨损；虽然至于那路过那里的人穿着它们真的差不多， 那天早上两人都同样躺在叶子上，没有踩踏过黑色的脚步.哦，我把第一个留了一天！然而，我知道路是怎么走的，我怀疑我是否应该回来.我将叹息在某个地方说这件事 千百年来: 树林中分出两条路，我 - 我选择了人迹罕至的那条， 这让一切变得不同.<p>-罗伯特·弗罗斯特</p></html>
padding 会弄乱 height: 100%.似乎先计算高度，然后添加填充，因此结果高度实际上更接近 120%.我在本地 html 文件中尝试了此代码，它似乎可以解决问题.
试试这个:
<头><风格>正文，HTML {边距:0；填充:0；}html {背景:url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') 无重复中心中心固定；背景尺寸:封面；}#主要的 {左边距:20%；右边距:20%；背景颜色:白色；高度:100%；}#内容 {填充:10%；}</风格><身体><div id="main"><div id="内容"><h1>未选择的路</h1>两条路在黄色的树林中分叉 抱歉我不能同时旅行 作为一个旅行者，我站了很长时间 并尽我所能地俯视其中一条 到它在灌木丛中弯曲的地方；然后拿了另一个，同样公平，也许有更好的要求，因为它长满青草，需要磨损；虽然至于那路过那里的人穿着它们真的差不多， 那天早上两人都同样躺在叶子上，没有踩踏过黑色的脚步.哦，我把第一个留了一天！然而，我知道路是怎么走的，我怀疑我是否应该回来.我将叹息在某个地方说这件事 千百年来: 树林中分出两条路，我 - 我选择了人迹罕至的那条， 这让一切变得不同.<p>-罗伯特·弗罗斯特</p></html>
When I view this page in Chrome, Firefox, or IE11, I notice upon horizontally resizing the window to its minimum width causes an overflow of text out of the white background div at the bottom of the page. The div is set to a height of 100%, so should it not continue to match the height of the page? It may seem the 100% matches the height of the window only, but upon initially loading the page in Chrome I see the white div causes a scroll bar such that there is more white space extended beyond on the height of the window.
I tried putting overflow: auto; in the #main css and the div ended up with a scroll bar. I removed it as it's not a solution I can accept. How can I get the div to accommodate its content automatically?
<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>
padding will mess up height: 100%. It seems to calculate the height and then add the padding so the resulting height is actually closer to 120%. I tried this code in a local html file and it seems to do the trick.
Try this instead:
<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>
这篇关于内容从 100% 高度的 div 溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
