您好，我想知道如何让页脚边框占据屏幕的整个宽度，并也要获得页脚的完整宽度背景，这要事先感谢。:)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First</title>
<link rel="stylesheet" href="css/first.css">
</head>
<body>
<div id="header">
</div>
<div class="footer">
<p>This is the Footer</p>
</div>
</body>
</html>
#header {
background-color:#99283c ;
margin: 0px;
height: 90px;
}
body{
background-color: yellow;
margin: 0px;
}
.footer p{
margin-top:38%;
margin-left: 45%;
border-top: 1px solid black;
padding-top: 10px;
max-width: 100%;
}
我建议你这样做。
在这里，我创建了一个容器，并使子级（页眉，内容，页脚）可以伸缩。这样可以很容易地控制您的布局。
html, body{
height: 100%;
margin: 0px;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.header {
background-color:#99283c ;
height: 90px;
}
.content {
flex: 1; /* content fill up space left */
background-color: yellow;
}
.footer {
border-top: 1px solid black;
background-color: red;
}<div class="container">
<div class="header">
<p>This is the Header</p>
</div>
<div class="content">
<p>This is the Content</p>
</div>
<div class="footer">
<p>This is the Footer</p>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句