页脚背景色未显示[重复]

问题描述 投票：0回答：1

此问题已经在这里有了答案：

我正在为网页设计一个简单的模板。在大屏幕上，我的页面如下所示：

！[1] https://imgur.com/a/M6ARRoJ

在小屏幕上看起来像这样：

！[2] https://imgur.com/a/6kLOSEI

而且，如我在图像中所示，页脚的背景消失了。

这是我的HTML和CSS代码：

body {
  background-color: #bccedc;
}

#content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}


/* === HEADER === */

#header {
  height: 50px;
  background-color: #99ccff;
}

#header h1 {
  text-align: center;
  margin: auto;
  padding-top: 10px;
  font-size: 25px;
  color: #3a3a3a;
  text-transform: uppercase;
  font-family: 'Century Gothic', 'Futura', sans-serif;
}

#middle {
  display: flex;
  /* Align sidebar with main */
}


/* === SIDEMENU === */

#sidebar {
  float: left;
  width: 20%;
  background-color: #00cc00;
  font-family: 'Century Gothic', 'Futura', sans-serif;
}

#sidebar ul {
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
}

#sidebar li {
  margin-top: 10px;
}

#sidebar a:link,
a:visited {
  text-decoration: none;
  color: #12366d;
}

#sidebar a:hover {
  color: white;
}

#sidebar a:active {
  color: yellow;
}


/* === MAIN === */

#main {
  min-height: 500px;
  float: left;
  width: 85%;
  background-color: #ffff99;
}

#main h2 {
  text-align: center;
  font-family: 'Century Gothic', 'Futura', sans-serif;
  color: #373737;
}

#main h3 {
  font-family: 'Century Gothic', 'Futura', sans-serif;
  padding-left: 20px;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
}

#main p {
  text-align: justify;
  margin: 20px;
  font-family: 'Calibri', 'Arial', sans-serif;
}

#main ul {
  padding-left: 70px;
  list-style-image: url(bullet.png);
}

#main ol {
  padding-left: 70px;
}

#main dt {
  font-family: 'Calibri', 'Arial', sans-serif;
  text-align: justify;
  font-weight: bold;
  padding-left: 40px;
}

#main li,
dd {
  font-family: 'Calibri', 'Arial', sans-serif;
  text-align: justify;
  margin-right: 30px;
}

#main table,
th,
td {
  border: 2px solid #003e80;
  border-collapse: collapse;
  height: 40px;
}

#main table {
  text-align: center;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 550px;
  font-family: 'Calibri', 'Arial', sans-serif;
  caption-side: bottom;
}

#main th {
  background-color: #99ccff;
  font-size: 20px;
  color: #e6f2ff;
}

#main td {
  background-color: #e6f2ff;
}

#main td:hover {
  background-color: white;
}

#main caption {
  font-style: italic;
  color: #003e80;
}


/* === FOOTER === */

#footer {
  height: 30px;
  padding-top: 20px;
  background-color: #99ccff;
}

#footer>p {
  margin: auto;
  text-align: center;
  font-family: 'Century Gothic', 'Futura', sans-serif;
  font-size: 14px;
}


/* === RESPONSIVE === */

@media only screen and (max-width: 850px) {
  #content {
    width: 600px;
  }
  #sidebar {
    width: 25%;
  }
  #main table {
    width: 400px;
  }
}

@media only screen and (max-width: 650px) {
  #content {
    width: 450px;
  }
  #middle {
    display: initial;
  }
  #sidebar {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  #sidebar ul {
    margin-left: 30px;
  }
  #sidebar li {
    float: left;
    margin: 10px;
  }
  #main {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Hello World</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="content">
    <div id="header">
      <h1>title</h1>
    </div>
    <div id="middle">
      <div id="sidebar">
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="lists.html">Link 1</a></li>
          <li><a href="tables.html">Link 2</a></li>
          <li><a href="imgs.html">Link 3</a></li>
        </ul>
      </div>
      <div id="main">
        <h2>Main body</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div id="footer">
      <p>Footer is here</p>
    </div>
  </div>
</body>

</html>

我在Internet上搜索解决方案，但没有任何帮助。有人可以告诉我问题到底是什么，如何解决？

html css
1个回答
1
投票

这是因为#main元素是浮动的。这样，由于默认情况下浮动元素不会由其父元素包装，因此页脚本身的位置“正式”在标题的正下方。 （在浏览器工具中检查）

在页脚的CSS中添加clear: both;以解决此问题：

body {
  background-color: #bccedc;
}

#content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}


/* === HEADER === */

#header {
  height: 50px;
  background-color: #99ccff;
}

#header h1 {
  text-align: center;
  margin: auto;
  padding-top: 10px;
  font-size: 25px;
  color: #3a3a3a;
  text-transform: uppercase;
  font-family: 'Century Gothic', 'Futura', sans-serif;
}

#middle {
  display: flex;
  /* Align sidebar with main */
}


/* === SIDEMENU === */

#sidebar {
  float: left;
  width: 20%;
  background-color: #00cc00;
  font-family: 'Century Gothic', 'Futura', sans-serif;
}

#sidebar ul {
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
}

#sidebar li {
  margin-top: 10px;
}

#sidebar a:link,
a:visited {
  text-decoration: none;
  color: #12366d;
}

#sidebar a:hover {
  color: white;
}

#sidebar a:active {
  color: yellow;
}


/* === MAIN === */

#main {
  min-height: 500px;
  float: left;
  width: 85%;
  background-color: #ffff99;
}

#main h2 {
  text-align: center;
  font-family: 'Century Gothic', 'Futura', sans-serif;
  color: #373737;
}

#main h3 {
  font-family: 'Century Gothic', 'Futura', sans-serif;
  padding-left: 20px;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
}

#main p {
  text-align: justify;
  margin: 20px;
  font-family: 'Calibri', 'Arial', sans-serif;
}

#main ul {
  padding-left: 70px;
  list-style-image: url(bullet.png);
}

#main ol {
  padding-left: 70px;
}

#main dt {
  font-family: 'Calibri', 'Arial', sans-serif;
  text-align: justify;
  font-weight: bold;
  padding-left: 40px;
}

#main li,
dd {
  font-family: 'Calibri', 'Arial', sans-serif;
  text-align: justify;
  margin-right: 30px;
}

#main table,
th,
td {
  border: 2px solid #003e80;
  border-collapse: collapse;
  height: 40px;
}

#main table {
  text-align: center;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 550px;
  font-family: 'Calibri', 'Arial', sans-serif;
  caption-side: bottom;
}

#main th {
  background-color: #99ccff;
  font-size: 20px;
  color: #e6f2ff;
}

#main td {
  background-color: #e6f2ff;
}

#main td:hover {
  background-color: white;
}

#main caption {
  font-style: italic;
  color: #003e80;
}


/* === FOOTER === */

#footer {
  height: 30px;
  padding-top: 20px;
  background-color: #99ccff;
  clear: both;
}

#footer>p {
  margin: auto;
  text-align: center;
  font-family: 'Century Gothic', 'Futura', sans-serif;
  font-size: 14px;
}


/* === RESPONSIVE === */

@media only screen and (max-width: 850px) {
  #content {
    width: 600px;
  }
  #sidebar {
    width: 25%;
  }
  #main table {
    width: 400px;
  }
}

@media only screen and (max-width: 650px) {
  #content {
    width: 450px;
  }
  #middle {
    display: initial;
  }
  #sidebar {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  #sidebar ul {
    margin-left: 30px;
  }
  #sidebar li {
    float: left;
    margin: 10px;
  }
  #main {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Hello World</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="content">
    <div id="header">
      <h1>title</h1>
    </div>
    <div id="middle">
      <div id="sidebar">
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="lists.html">Link 1</a></li>
          <li><a href="tables.html">Link 2</a></li>
          <li><a href="imgs.html">Link 3</a></li>
        </ul>
      </div>
      <div id="main">
        <h2>Main body</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div id="footer">
      <p>Footer is here</p>
    </div>
  </div>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.