Question

请检查我增加了宽度：100％;反对div页脚标签，以便页脚部分可以覆盖整个页面，但它只是覆盖1000px ..我尝试了不同的东西，但仍然存在问题，我不知道该怎么做..请帮助！[在此处输入图像说明] [1]

@charset "utf-8";
/* CSS Document */

body {
	padding: 0; 
	margin: 0; 
	width: 100%; 
	font-family: "Open Sans Condensed",sans-serif;
}

.wrapper {
	width: 100%;
	padding: 0; 
	margin: 0; 
}


														/* header section */ 

.header {
	width: 100%; 
	background: #A3375B; 
	padding: 0; 
	margin: 0; 
	height: 450px; 
}

.headcontent {
	width: 1000px; 
	margin: 0 auto; 
	position: relative; 
}

.logo {
	padding-top: 60px;
	width: 400px;
}

.logo h1 {
	text-decoration: none; 
	text-transform: lowercase; 
	font-style: normal; 
	font-family: "Open Sans Condensed",sans-serif;
	letter-spacing: -2px;
	text-transform: lowercase;
	font-size: 3.8em;
	font-weight: 400; 
	color: #FFF;  
	margin: 0; 
}

.logo h1 a {
	text-decoration: none; 
	color: #FFF; 
}

.logo p {
	color: #FFF; 
	font-size: 20px; 
	margin-top: -5px; 
}

.logo p a {
	color: #FFF; 
	text-decoration: none; 
	text-transform: uppercase; 
}

.nav {
	float: right; 
	position: absolute; 
	right: 15px; 
	bottom: 30px;
}

.nav ul {
	padding: 0; 
	margin: 0; 
	float: right; 
}

.nav ul li {
	list-style: none; 
	float: left; 
}

.nav ul li a {
	text-decoration: none; 
	color: #CE92A6; 
	font-size: 20px;
	display: block; 
	padding: 10px 0px 15px 30px;
	line-height: normal;
}

.nav ul a:hover {
	color: #FFF; 
}

#active {
	color: #FFF; 
}


																	/* hero image section */ 

.hero {
	width: 100%; 
}

.heroimage {
	margin: 0 auto; 
	width: 970px; 
	border: 15px solid #F4F4F4; 
	margin-top: -250px; 
	height: 320px; 
	background: #3d566e; 
	-webkit-box-shadow: 0 8px 6px -6px black;
     -moz-box-shadow: 0 8px 6px -6px black;
          box-shadow: 0 8px 6px -6px black;
}

.td {
	margin: 0 auto; 
	width: 660px;
}


									/* main content section */

.content {
	width: 100%; 
	padding-top: 0; 
	margin-top: -50px; 
}

.maincontent {
	width: 1000px; 
	margin: 0 auto; 
}

.hheading h2 {
	letter-spacing: -3px;
	text-align: center;
	font-size: 48px;
	font-family: "Open Sans Condensed",sans-serif;
	border-bottom: 1px dashed #E7E2DC;
	color: #39405B; 
	font-weight: 100; 
	padding-bottom: 50px; 
}

.greycolor {
	color: #8A8985; 
}

																						/* second part */

.keepthem {
	width: 1000px; 
	margin: 0 auto;
	overflow: hidden; 
}

.leftside {
	width: 600px; 
	float: left; 

}

.leftside p{
	line-height: 1.8em; 
}

.leftside h2 {
	text-transform: lowercase;
	font-weight: normal;
	color: #7D7764;
	letter-spacing: -3px;
	font-size: 2.8em;
}

.rightside {
	background: url(images/img05.jpg) no-repeat; 
	height: 300px; 
	float: right;
	width: 380px; 
}

.rightside h2 {
	padding-left: 28px;
	letter-spacing: -3px;
	font-size: 2.8em;
	text-transform: lowercase;
	color: #7D7764;
	font-weight: 100; 
}

.rightside ul {
	padding: 0; 
	margin: 0; 
	padding-left: 28px;
}

.rightside ul li {
	list-style: none; 
	padding-top: 9px;
	padding-bottom: 5px; 
	border-bottom: 1px dashed #E7E2DC;
}

.rightside ul a {
	font-size: 16px;
	text-decoration: none; 
	color: #CA4C44;
	display: block; 
}

.rightside ul li a:hover {
		text-decoration: underline; 
}





.fuckingfooter {
	background: #A3375B; 
	min-width:100%;
	z-index:99;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
            <title>Good Nature - PSD to HTML</title>
            <link type="text/css" rel="stylesheet" href="style.css">
            <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>

<body>
	<div class="wrapper">
    
    																												<!-- header section starts here --> 
            
            	<div class="header">
                		<div class="headcontent">
                        			<div class="logo">
                        						<h1><a href="#">Good-Natured</a></h1>
                                                <p>Designed by <a href="#">TEMPLATED</a></p>
                                	</div> <!-- end of logo --> 
                                    
                                    <div class="nav">
                                    		<ul>
                                            		<li><a href="#" id="active">homepage</a></li>
                                                    <li><a href="#">blog</a></li>
                                                    <li><a href="#">photos</a></li>
                                                    <li><a href="#">about</a></li>
                                                    <li><a href="#">links</a></li>
                                                    <li><a href="#">contact</a></li>
                                            </ul>
                                    </div><!-- end of nav --> 
                        </div><!-- end of headcontent --> 
                </div><!-- end of header --> 
    
																						   					<!-- start of hero image --> 
                        
       <div class="hero">
       		<div class="heroimage">
            			
            </div><!-- end of heroimage --> 
            <div class="td">
            		
             </div>
       </div><!-- end of hero --> 
    
    
    																										<!-- main content area --> 
    
    
    <div class="content">
    		<div class="maincontent">
            
            			<div class="hheading">
            					<h2>Donec placerat odio vel elit. <span class="greycolor">Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. </span></h2>
                        </div><!-- end of hheading --> 
                   
           <div class="content">
           			<div class="keepthem">
                        <div class="leftside">
                        		<h2>Welcome to Good-Natured </h2>
                                <p> This is Good-Natured , a free, fully standards-compliant CSS template designed by TEMPLATED. This free template is released under the Creative Commons Attribution license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :)</p>
                                <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, egestas at sem. Mauris quam enim, in, rhoncus ut, lobortis a, est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer. </p>
                        </div><!-- end of leftside --> 
                        
                        <div class="rightside">
                        		<h2>Nulla luctus eleifend</h2>
                                <ul>
                                		<li><a href="#">Aliquam libero</a></li>
                                        <li><a href="#">Consectetuer adipiscing elit</a></li>
                                        <li><a href="#">Metus aliquam pellentesque</a></li>
                                        <li><a href="#">Suspendisse iaculis mauris</a></li>
                                        <li><a href="#">Urnanet non molestie semper</a></li>
                                        <li><a href="#">Proin gravida orci porttitor</a></li>
                                </ul>
                        </div><!-- end of rightside --> 
                     </div><!-- end of keepthem -->
               </div><!-- end of content --> 
        
          
                        
																						             <!-- end of footer --> 
                        
           <div class="fuckingfooter">
           			<div class="middlefuckingfooter">
                    		here are soem fucking texts
                    </div>
           </div>

 </div><!-- end of wrapper --> 
</body>
</html>

Answer 1

你的页脚在里面.maincontent div，它有1000px，所以......

如果放弃它，它可以工作：

<div class="content">
        <div class="maincontent">

                    <div class="hheading">
                            <h2>Donec placerat odio vel elit. <span class="greycolor">Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. </span></h2>
                    </div><!-- end of hheading --> 

       <div class="content">
                <div class="keepthem">
                    <div class="leftside">
                            <h2>Welcome to Good-Natured </h2>
                            <p> This is Good-Natured , a free, fully standards-compliant CSS template designed by TEMPLATED. This free template is released under the Creative Commons Attribution license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :)</p>
                            <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, egestas at sem. Mauris quam enim, in, rhoncus ut, lobortis a, est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer. </p>
                    </div><!-- end of leftside --> 

                    <div class="rightside">
                            <h2>Nulla luctus eleifend</h2>
                            <ul>
                                    <li><a href="#">Aliquam libero</a></li>
                                    <li><a href="#">Consectetuer adipiscing elit</a></li>
                                    <li><a href="#">Metus aliquam pellentesque</a></li>
                                    <li><a href="#">Suspendisse iaculis mauris</a></li>
                                    <li><a href="#">Urnanet non molestie semper</a></li>
                                    <li><a href="#">Proin gravida orci porttitor</a></li>
                            </ul>
                    </div><!-- end of rightside --> 
                 </div><!-- end of keepthem -->
           </div><!-- end of content --> 



                                                                                                 <!-- end of footer --> 



</div><!-- end of wrapper --> 


<script type="text/javascript">

</script>

</div>
<div class="fuckingfooter">
  <div class="middlefuckingfooter">
    here are soem fucking texts
  </div>
</div>

Answer 2

将maincontent width 100％更改为

.maincontent {

width: 100%; 

margin: 0 auto;

}

页脚宽度：100％不会覆盖屏幕

2 个答案: