Question

我知道这个问题已被回答了一百万次，但我不能让它发挥作用！我希望我的页脚停留在页面的底部，但它继续制作奇怪的东西。

那是我的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;

}

Idealy我希望网站看起来像第一张图片，现在它看起来像第二张 pictures

但是当我，例如，添加这个位：

.offer{
    background-color: #4CAF50;
    float: left;
    margin: 20px 20px;}

it looks like this

有什么建议吗？ :( 谢谢！

Answer 1

您可以在包装器中添加id =“container”的第二个div，并在其中包含和。把容器放一个浮点数：左css到！

Answer 2

你可以试试这个：

<div class="MotherDiv" style="box-sizing: border-box;">
your content 
</div

参考：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

页脚不会停留在一个地方，包装器会消失

2 个答案: