gpt4 book ai didi

html - 内容从 100% 高度的 div 溢出

转载 作者:行者123 更新时间:2023-11-28 12:35:12 26 4
gpt4 key购买 nike

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

最佳答案

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>

关于html - 内容从 100% 高度的 div 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27829311/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com