gpt4 book ai didi

jquery - 当底部有页脚时,根据浏览器的大小调整 div 容器的大小

转载 作者:行者123 更新时间:2023-11-28 05:32:59 27 4
gpt4 key购买 nike

我一直无聊做一个网站,在主页上(最终每个页面都会有)有一个页脚,就像stackoverflow上的一样,在主页上有一个标题,一个部分顶部、主要部分和页脚的文本。我希望在调整页面大小时扩展主 div,并且最小高度为 500px。

到目前为止我尝试过的代码:

.tutorials {
background: linear-gradient( 180deg, rgb(240,230,220), rgb(200,190,180) );
min-height: 500px;
height: 66%;
left: 0;
right: 0;
margin-top: 0px;
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}

即使此代码调整了主 div 的大小,页脚文本也不会在主 div 展开时向下移动,这会阻塞页脚文本。此外,如果我使页面小于最小高度然后向下滚动,而不是主 div 是 500px 而页脚在它下面,因为我滚动 div 的顶部停留在一个固定的位置并形成一个空白区域在顶部文本和主 div 之间。当我继续向下滚动时,它上方的空白没有显示页脚,而是更远。添加代码 position: fixed 没有任何帮助。我更愿意使用 HTML、CSS 或 jQuery 来解决这个问题,但如有必要,我愿意使用其他语言。

最佳答案

我不确定您的具体情况,但我相信我可以提供帮助。我将您的问题解释为您希望主 div 展开并且页脚保持在其下方。您可以将页脚的位置设置为相对位置 (position: relative;),然后使用 clear: both; 来确保它不会占用上面的任何 div它。这是一个实际的例子:

#main{
width: 70%;
height: 20vw;
float: left;
text-align: center;
background-color: orange;
min-height: 150px;
}

#side{
width: 30%;
height: 20vw;
float: left;
text-align: center;
background-color: yellow;
min-height: 150px;
}

#footer{
width: 100%;
clear: both;
text-align: center;
background-color: blue;
}
<html>
<body>
<div id="main"><h1>Main</h1></div>
<div id="side"><h1>Side</h1></div>
<div id="footer"><h1>Footer</h1></div>
</body>
</html>

关于jquery - 当底部有页脚时,根据浏览器的大小调整 div 容器的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38405829/

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