gpt4 book ai didi

正文中的 HTML div 调整整个页面的大小

转载 作者:行者123 更新时间:2023-11-28 06:59:36 24 4
gpt4 key购买 nike

我正在为我的博客设计一个页面,我发现当我在 body 中有我的 div.page-content 时,它会出现故障并调整大小整个 body 到 div 的顶部...无论如何我都需要 body 来填充视口(viewport)。

相关 HTML

<body>
<div class="page-content"> <!-- THIS IS MY .page-content DIV -->
asdasd
</div>
</body>

相关 CSS

body, html {
height: 100%; width: 100%; /* Shouldn't this make the page guaranteed to fill the viewport? */
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}

.page-content {
min-height: 300px; width: 600px;
margin: 60px auto 30px auto;
background-color: blue;
}

JSFiddle:http://jsfiddle.net/deansheather/5et5kgsn/

我不知道是否有 javascript 方法来解决这个问题,但我更喜欢 CSS 和 HTML 的答案。

对于真正奇怪的解释,我很抱歉,这是我想到的。

最佳答案

您必须将 .page-content 类高度设置为自动。认为您的问题已解决。试试这个:

body, html {
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}
.page-content {
min-height: 300px; width: 600px; height: auto;
margin: 60px auto 30px auto;
background-color: blue;
}

关于正文中的 HTML div 调整整个页面的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33314837/

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