页脚background-color占据了我的整个网页
[英]Footer background-color is taking over my entire web page
问题描述
Help! 
救命！ My footer background-color is taking over my entire web page. 我的页脚背景颜色将接管整个网页。 This was supposed to be a blue backgrounded footer on a white page. 这应该是白页上的蓝色背景页脚。 When I take mention of the footer from my css the page looks correct, but my footer is lost. 当我从CSS中提到页脚时，页面看起来正确，但是页脚丢失了。 Help? 救命？ I've tried everything! 我已经尝试了一切！ Here is the jsfiddle: https://jsfiddle.net/3eoxaqjt/1/ I thank you much for any help that you can give me! 这是jsfiddle： https ://jsfiddle.net/3eoxaqjt/1/非常感谢您为我提供的任何帮助！
html: 的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 & CSS refresh</li>
<li>Browser to Debug</li>
<li>Responsive Design Media CSS</li>
<li>Responsive Design Mobile</li>
<li>Responsive Design Desktop & 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: 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;
}
4 个解决方案
解决方案1
2 2016-10-19 20:38:28
Just add 只需添加
<div style="clear: both;"></div>
before 之前
<div class="footer">
Or as Praveen Kumar posted, add clear: both; 或如Praveen Kumar所述，添加明确说明： to your .footer css. 到您的.footer CSS。
解决方案2
2 2016-10-19 20:39:06
Add clear: both to the footer: 在页脚中添加clear: both ：
.footer {clear: both;}
Updated Fiddle: https://jsfiddle.net/qqdtex78/ 更新的小提琴： https : //jsfiddle.net/qqdtex78/
解决方案3
1 2016-10-19 21:27:21
Most grid based frameworks require a column to be inside of a row. 大多数基于网格的框架都要求一列位于行内。 But you have columns without any rows, and so you don't get the float clearing property that's built into the rows. 但是您的列没有任何行，因此无法获得行中内置的浮点清除属性。 Wrap all of your column divs inside <div class="row"></div> and that should take care of your footer problem. 将所有列div包裹在<div class="row"></div> ，这样可以解决页脚问题。
解决方案4
0 2016-10-20 01:03:49
@Andi is correct! @安迪是正确的！ You should have a and inside this row the responsive columns need to be coded. 您应该在该行内有一个，并且需要对响应列进行编码。 Your grid system has to define for full with , how many columns and base on that you need to apply the different col-m-* for different elements. 您的网格系统必须完全定义，您需要为不同的元素应用不同的col-m- *来定义多少列。 If this is not clear, mock the layout and share will do the sample code for layout. 如果不清楚，请模拟布局并共享将执行布局的示例代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.