gpt4 book ai didi

html - Css 中的 Sticky Footer 会妨碍容器,或者创建额外的空间

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

太棒了,我正在用 Css 制作一个粘性页脚。它不按我想要的方式工作。页脚贴在底部,但我还希望页面的高度为 100%。这行不通,我已经尝试了很多。目前,页脚妨碍了容器,并且它们重叠了。如果我给容器 margin-bottom: 70px;,当内容非常小时,它会产生额外的不需要的空间,从而产生不必要的滚动条。

这是我的代码:

<html><head>

<style type='text/css'>

body {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
}

.container {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 800px;
height: auto !important;
min-height: 100%;
}

.bold-show {
font-family: Helvectica, sans-serif;
font-size: 96px;
background-color: rgba(0, 0, 0, 0.95);
color: #eeeeee;
padding: 50px;
}

#footer {
position: relative;
height: 70px;
width: 100%;
text-align: center;
display: table;
margin-top: -70px;
background-color: rgba(0, 0, 0, 0.9);
color: #eeeeee;
}

#footer div {
display: table-cell;
vertical-align: middle;
}

</style>

</head><body>

<div class='container'>
<div class='bold-show'>
Donuts. Food for thought. This is my place, this fox will guide you. Random filler text for the win.
</div>
</div>

<div id='footer'>
<div>
We support a free and open internet.
</div>
</div>

</body></html>

此外,这不是实际站点。只是测试以在实际站点上实现。

最佳答案

我想这就是您要找的:

<div id="wrapper">
<header></header>
<div id="main"></div>
<footer></footer>
</div>

body, html, #wrapper { height: 100%; } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header,
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */

关于html - Css 中的 Sticky Footer 会妨碍容器,或者创建额外的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14247479/

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