gpt4 book ai didi

html - 使装饰 div 的边框向下延伸到粘性页脚的顶部

转载 作者:太空宇宙 更新时间:2023-11-04 03:12:21 25 4
gpt4 key购买 nike

(注意:据我所知,我的问题在互联网上没有任何地方被问过,我已经搜索了将近两天。)

我有一个带有半透明背景和装饰性边框的内容 div,它完美地位于站点 Logo 下方,但不会向下延伸以与页脚的顶部相接,页脚的顶部位置绝对.这是一个包含几句话文本和一个简单联系表单的联系页面,因此内容不足以填满整个页面。

具体来说,我需要一个带有边框的 div 来填满整个页面,而不创建垂直滚动条,并与绝对定位的页脚顶部相接。

网站的其余部分不使用绝对定位的页脚,因为有足够的内容始终将页脚向下推。因此,此处可以接受任何 CSS 属性,必要时甚至可以修改表格!

JS Fiddle

header {
height: 44px;
background: orange;
}

article {
box-sizing: border-box;
border: 1px solid red;
}

footer {
height: 22px;
background: green;
position: absolute;
bottom: 0;
}
<body>
<header>
header
</header>
<article>
article with small amount of content<br>
<br>
and a simple contact form<br>
<br>
this red border needs to meet the top of the footer<br>
without creating a vertical scroll bar
</article>
<footer>
footer
</footer>
</body>

最佳答案

您可以使用 css3 将“文章”的高度设置为 100% 减去页眉和页脚高度(在本例中为 66 像素),如下所示:

height:calc(100% - 66px);

只需确保文章元素的每个父元素的高度都设置为 100%(包括 html 和 body)。

你修改过的 fiddle

关于html - 使装饰 div 的边框向下延伸到粘性页脚的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29321528/

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