gpt4 book ai didi

html - css页脚总是在页面底部

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

如何使页脚始终位于页面底部(无粘性)?我的页脚位于屏幕底部,但不在页面上。

这是我的代码示例。

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="body">Body</div>
<div class="footer">Footer</div>
</div>
</body>
</html>

CSS

.footer {
width:100%;
height:109px;
position:absolute;
bottom:0;
left:0;
background-color: purple;
}

最佳答案

<style>

.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}

.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
</style>
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
</div>


<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>
</div>

关于html - css页脚总是在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44400585/

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