Question

您好我想知道如何让页脚的边框占据屏幕的整个宽度，并在页脚上获得全宽背景，提前感谢。：）

<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%;

}

Answer 1

您必须从margin-left:45%移除.footer p以下 CSS：

.footer p {
    margin-top: 38%;
    text-align: center;
    border-top: 1px solid black;
    padding-top: 10px;
    max-width: 100%;
}

检查Fiddle

Answer 2

我建议你这样做。

在这里，我创建了一个容器，并使子项（标题，内容，页脚）变为项目。这样做可以很容易地控制你的布局。

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>

如何让页脚边框占据屏幕的整个宽度？

2 个答案: