Question

帮助！我的页脚背景颜色正在占据我的整个网页。这应该是一个白页上的蓝色背景页脚。当我从我的CSS中提到页脚时，页面看起来是正确的，但我的页脚丢失了。救命？我已经尝试了一切！这是jsfiddle：https://jsfiddle.net/3eoxaqjt/1/我非常感谢你给我的任何帮助！

HTML：

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/responsive.css" />
    <link rel="stylesheet" type="text/css" media="print" href="css/print.css">
  </head>

  <body>

    <div>
      <header>
        <h1>Project 2</h1>
      </header>
    </div>

    <section>
      <div class="row col-m-3 col-3">
        <p id="firstLine">About This Project</p>
        <p id="secondLine">Unit Topics Covered</p>
        <p id="thirdLine">References</p>
        <p id="fourthLine">Tips</p>
      </div>

      <div class="col-m-9 col-9">
        <h2>About This Project</h2>
        <p>This project is about responsive design. Resize the browser window (Viewport) to see how the content respond to the resizing.</p>
        <img src="images/responsive.png" alt="responsive images">
      </div>


      <div class="col-m-4 col-3">
        <h2>Unit Topics Covered</h2>
        <ul>
          <li>HTML &amp; CSS refresh</li>
          <li>Browser to Debug</li>
          <li>Responsive Design Media CSS</li>
          <li>Responsive Design Mobile</li>
          <li>Responsive Design Desktop &amp; Tablet Hiding/Show</li>
        </ul>
      </div>

      <div class=" references col-m-8 col-3">
        <h2 id=referencesHeading>References</h2>
        <p><a href="http://www.w3schools.com/html/default.asp" target="_blank">W3Schools: HTML</a></p>
        <p><a href="http://www.w3schools.com/css/default.asp" target="_blank">W3Schools: CSS</a></p>
        <p><a href="https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/basics?hl=en" target="_blank">Browser: Chrome</a></p>
        <p><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector" target="_blank">Browser: Firefox</a></p>
        <p><a href="https://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx" target="_blank">Browser: IE</a></p>
        <p><a href="https://www.w3.org/TR/CSS21/media.html" target="_blank">W3Schools: Media Types</a></p>
        <p><a href="http://www.w3schools.com/cssref/css3_pr_mediaquery.asp" target="_blank">W3Schools: Media Queries</a></p>
        <p><a href="http://www.w3schools.com/css/css_rwd_intro.asp" target="_blank">W3Schools: CSS Responsive Design</a></p>
        <p><a href="http://www.w3schools.com/css/css_rwd_images.asp" target="_blank">W3Schools: Responsive Design Images</a></p>
        <p><a href="http://www.w3schools.com/w3css/w3css_responsive.asp" target="_blank">W3Schools: CSS3 Responsive</a></p>
      </div>

      <div class="col-m-12 col-6">
        <h2>Tips</h2>
        <ul>
          <li><span>Go Mobile First -</span> Approximately 1 in every 7 people on earth use their mobile devices to access the internet</li>
          <li><span>Get Acquainted with Media Queries -</span> Media queries check for a device’s resolution, height, width and orientation</li>
          <li><span>Understand What Mobile Means for Your Users -</span> Use analytics to figure out why a user is visiting your website on their phone</li>
          <li><span>Use Percentages -</span> Instead of designing breakpoints for every possible viewport, you set a maximum layout size</li>
          <li><span>The Need for Speed -</span> Smartphone users expect a site to load in under 4 seconds. Main reason behind a slow site are non-optimized images</li>
          <li><span>Eliminate the Unnecessary -</span> Get rid of excessive elements, not only for your user experience, but also for website’s speed</li>
          <li><span>To Hamburger or Not to Hamburger -</span> Keep less popular links in the hamburger menu navigation</li>
          <li><span>Make it Readable -</span> Don’t make your users squint to read or pinch-to-zoom. Make your text size large enough to read from a smaller screen</li>
          <li><span>Use the Right Button Size -</span> Avoid small button sizes. Padding increases the tappable area, but margins do not</li>
          <li><span>Design for Screen Orientation -</span> Landscape orientation wins over portrait orientation 59% to 41%</li>
        </ul>
      </div>

    </section>

<div class="footer">
    <p>
       <p>Time and Date</p>
    </p>
</div>

</body>
</html>

的CSS：

* {
  box-sizing: border-box;
}

header,
footer,
nav,
section,
article,
aside {
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

body {
  font-size: 14px;
  font-family: "Lucinda" Sans sans-serif;
}

@media screen and (min-width: 600px)and (max-width: 768px) {
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%
  }
  .col-m-3 {
    width: 25%
  }
  .col-m-4 {
    width: 40%
  }
  .col-m-5 {
    width: 41.66%
  }
  .col-m-6 {
    width: 50%
  }
  .col-m-7 {
    width: 58.33%
  }
  .col-m-8 {
    width: 60%
  }
  .col-m-9 {
    width: 75%
  }
  .col-m-10 {
    width: 83.33%
  }
  .col-m-11 {
    width: 91.66%
  }
  .col-m-12 {
    width: 100%
  }
}

@media screen and (min-width: 768px) {
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%
  }
  .col-3 {
    width: 25%
  }
  .col-4 {
    width: 33.33%
  }
  .col-5 {
    width: 40%
  }
  .col-6 {
    width: 50%
  }
  .col-7 {
    width: 58.33%
  }
  .col-8 {
    width: 60%
  }
  .col-9 {
    width: 75%
  }
  .col-10 {
    width: 83.33%
  }
  .col-11 {
    width: 91.66%
  }
  .col-12 {
    width: 100%
  }
}

h1 {
  background-color: #9933cc;
  color: white;
  padding: 15px;
  list-style: none;
}

#firstLine {
  background-color: #33b5e5;
  font: white;
  box-shadow: 1px 1px 1px #888888;
  padding: 8px;
}

#firstLine:hover {
  background-color: #0099cc;
}

#secondLine {
  background-color: #33b5e5;
  font: white;
  box-shadow: 1px 1px 1px #888888;
  padding: 8px;
}

#secondLine:hover {
  background-color: #0099cc;
}

#thirdLine {
  background-color: #33b5e5;
  font: white;
  box-shadow: 1px 1px 1px #888888;
  padding: 8px;
}

#thirdLine:hover {
  background-color: #0099cc;
}

#fourthLine {
  background-color: #33b5e5;
  font: white;
  box-shadow: 1px 1px 1px #888888;
  padding: 8px;
}

#fourthLine:hover {
  background-color: #0099cc;
}

img {
  max-width: 100%;
  height: auto;
}

#referencesHeading {
  color: white;
}

.references {
  text-align: left;
  font: 14px;
  box-shadow: 1px 1px 1px #888888;
  padding: 10px;
  background-color: #33b5e5;
}

a:link {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

span {
  color: orange;
}

.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 10px;
    padding: 15px;
}

Answer 1

添加

<div style="clear: both;"></div>

之前

<div class="footer">

Fiddle Updated here

或者正如Praveen Kumar发布的那样，加上明确的：两者;你的.footer css。

Answer 2

将clear: both添加到页脚：

.footer {clear: both;}

更新小提琴：https://jsfiddle.net/qqdtex78/

Answer 3

大多数基于网格的框架都需要一列在一行内。但是你有没有任何行的列，所以你没有获得内置于行中的浮动清除属性。将所有列div包装在<div class="row"></div>内，这应该可以解决您的页脚问题。

Answer 4

@Andi是对的！您应该在此行中有一个响应列需要编码。您的网格系统必须定义完整的，有多少列和基础，您需要为不同的元素应用不同的col-m- *。如果不清楚，那么模拟布局和共享将为布局做示例代码。

页脚背景颜色正在接管我的整个网页

4 个答案: