我有一个我正在努力的网站，我正试图让页脚填满其中的内容。然而，内容似乎都在推向左侧。我试过浮动：对;没有运气。我有一个小提琴，希望澄清我的意思。我一直试图让页脚位于网站的最底部，下方没有白色。尝试的位置：绝对底部; 0;
我的另一个问题是滑块图像会拉伸页面的整个长度，但它应该只与页脚的宽度相同。
Jsfiddle：http://jsfiddle.net/dottsie/LueLqudb/2/
HTML：
<title>Home</title>
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</script>
<!---strat-slider---->
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/slider-style.css" />
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<!---//strat-slider---->
<!---start-login-script--->
<script src="js/login.js"></script>
<!---//End-login-script--->
<!-----768px-menu----->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css" />
<script type="text/javascript" src="js/jquery.mmenu.js"></script>
<script type="text/javascript">
// The menu on the left
$(function() {
$('nav#menu-left').mmenu();
});
</script>
<!-----//768px-menu----->
</head>
<body>
<!---start-wrap---->
<!------start-768px-menu---->
<div id="page">
<div id="header">
<a class="navicon" href="#menu-left"> </a>
</div>
<nav id="menu-left">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="store.html">Buy some</a></li>
<div class="clear"> </div>
</ul>
</nav>
</div>
<!------start-768px-menu---->
<!---start-header---->
<div class="header">
<div class="wrap">
<div class="header-left">
<div class="logo">
<a href="index.html">Yoop</a>
</div>
</div>
<div class="header-right">
<div class="top-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="store.html">Store</a></li>
</ul>
</div>
<div class="sign-ligin-btns">
<ul>
<li id="signupContainer"><a class="signup" id="signupButton" href="#"><span><i>Signup</i></span></a>
<div class="clear"> </div>
<div id="signupBox">
<form id="signupForm">
<fieldset id="signupbody">
<fieldset>
<label for="email">Email Address <span>*</span></label>
<input type="text" name="email" id="signupemail" />
</fieldset>
<fieldset>
<label for="password">Choose Password <span>*</span></label>
<input type="password" name="password" id="signuppassword" />
</fieldset>
<fieldset>
<label for="password">Confirm Password <span>*</span></label>
<input type="password" name="password" id="signuppassword1" />
</fieldset>
<input type="submit" id="signup" value="Register Now!" />
</fieldset>
</form>
</div>
<!-- Login Ends Here -->
</li>
<li id="loginContainer"><a class="login" id="loginButton" href="#"><span><i>Login</i></span></i></a>
<div class="clear"> </div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<label class="remeber" for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<input type="submit" id="login" value="login" />
</fieldset>
<span><a href="#">Forgot your password?</a></span>
</form>
</div>
<!-- Login Ends Here -->
</li>
<div class="clear"> </div>
</ul>
</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
</div>
<!---//End-header---->
<!----start-banner---->
<div class="text-slider">
<div class="wrap">
<!---start-da-slider----->
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Design your very own</h2>
<a href="design.html" class="da-link">Find out More</a>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"> </span>
<span class="da-arrows-next"> </span>
</nav>
</div>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 450
});
});
</script>
</div>
</div>
<!---//End-da-slider----->
<!----//End-banner---->
<!----start-content--->
<div class="content">
<!--- start-top-grids---->
<!---start-mid-grids--->
<div class="mid-grids-right">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="footer-grids">
<div class="wrap">
<div class="footer-grid">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About design</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>
<div class="footer-grid">
<h3>More</h3>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class="footer-grid">
<h3>Connect With Us</h3>
<ul class="social-icons">
<li><a class="facebook" href="#"> </a></li>
<li><a class="twitter" href="#"> </a></li>
<li><a class="youtube" href="#"> </a></li>
</ul>
<p class="copy-right">Website by <a href="#">bloop</a></p>
</div>
<div class="footer-grid">
<h3>Newsletter</h3>
<p>Subscribe to our newsletter to keep up-to-date with all the latest news.</p>
<form>
<input type="text" class="text" value="Your Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Name';}">
<input type="text" class="text" value="Your Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Email';}">
<input type="submit" value="subscribe" />
</form>
</div>
<div class="clear"> </div>
</div>
</div>
<!---//End-bottom-footer-grids---->
</div>
<!----//End-content--->
<!---//End-wrap---->
</body>
答案 0 :(得分：1)
删除最后<div class="clear"> </div>以删除底部的空格。