我知道这个问题已经回答了一百万次，但我就是做不到!我希望我的页脚保留在页面底部，但它一直在制造奇怪的东西。
这是我的 html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Chollerton Tearooms</title>
<style>
</style>
</head>
<body>
<div class="logo">
</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Find out more</a></li>
<li><a href="#offer">Offer</a></li>
<li><a href="#credits">Credits</a></li>
<li><a href="#admin">Admin</a></li>
<li><a href="#wireframe">Wireframe</a></li>
</ul>
<div class="wrapper">
<div class="offer">
<h1>Chollerton Tearooms</h1>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<p>Hello, this is my first web page at University.</p>
<br> <br>
</div>
<footer>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
<p>Footer.Footer.Footer.Footer.Footer.Footer.Footer. </p>
</footer>
</div>
</body>
</html>
那是css:
body {
background-image: url("ba1.jpg");
position: relative;
text-align: center; /*For IE6 Shenanigans*/
}
.logo {
background: url(nl.jpg) no-repeat center center;
width: 100%;
height: 283px;
z-index: 1;
position: relative;
}
ul {
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
background-color: #6fb9d6;
width: 960px;
text-align:center;
}
li {
display:inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 22px;
text-decoration: none;
}
/* Change the link color to #d05568 (pink) on hover */
li a:hover {
background-color: #d05568;
}
/* Change the nav element color when active */
.active {
background-color: #4CAF50;
}
h1 {text-align: center;}
p {text-align: center;}
*{
margin:0;
padding:0;
}
.wrapper{
background: url(bwflowerstop.png) no-repeat top;
background-color: #fff;
width:960px;
margin:0 auto;
text-align:left;
}
footer {
background: url(bwflowersbottom.png) no-repeat bottom;
margin: 0 auto;
width: 960px;
background-color: #fff;
position: absolute;
}
理想情况下，我希望网站看起来像第一张图片，现在看起来像第二张 pictures
但是，例如，当我添加这个位时:
.offer{
background-color: #4CAF50;
float: left;
margin: 20px 20px;}
有什么建议吗？ :( 谢谢!
最佳答案
你可以试试这个:
<div class="MotherDiv" style="box-sizing: border-box;">
your content
</div
关于html - 页脚不停留在一个地方，包装消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34110499/