CSS DIV / 页脚不在底部答案

【问题标题】：CSS DIV / Footer Not at BottomCSS DIV / 页脚不在底部
【发布时间】：2013-12-08 06:57:09
【问题描述】：

我的 css 有问题...

我使用 div 容器一一制作网页，完成后我想将页脚放在底部..

但现在当我写东西时，它不会低于所有内容..而是弹出页面的中间..并在右侧..

我尝试使用 css 和 bottom:0; 以及许多其他东西......但不仅是页脚，而且任何新的容器/div 都在页面中间而不是所有内容下方......

.footer {
   position:absolute;
   bottom:0;
   width:100%;
   background:#6cf;
}

不工作:(

http://jsfiddle.net/sDN7w/

我把 css 和 html 代码放在那里.. 但是没有图像它就搞砸了.. 但是版权仍然排在首位......即使在那里......如果没有任何效果，我会将整个内容上传到网站让你们看清楚..

【问题讨论】：

你可以在这里添加你的html和css完整源代码，或者你可以做一个小提琴吗？
你有没有把body的位置设置为relative，把它的高度设置为100%？
您可以在stackoverflow.com/questions/1488565/…找到答案
我不知道为什么这个问题得到了近距离投票，因为 OP 已经尝试过并且也贡献了代码，所以停止近距离投票
在您的 html 正文为空时，只有页脚位于页面中间。否则为 html 正文设置高度。

标签： html css

【解决方案1】：

看看这个小提琴

http://jsfiddle.net/vigneshvdm/AM6MX/1/

HTML

<div class="footer">provide footer text here
</div>
<div class="other"></div>
<div class="other"></div>

CSS

.footer {
   position:absolute;
   bottom:0px;
   width:100%;
   background:#6cf;
    height: 30px;
    text-align:center;
 }
.other{
    width:100px;
    height: 100px;
    background:green;
   margin-left:30px;
}

在您的情况下，问题是 BOTTOM 位置将被 TOP 值覆盖。因此，您可以尝试给出最高值，这将起作用！你可以查看here

【讨论】：

【解决方案2】：

html 页面....

<html>
<head>
<link href="booboo.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrap">

    <div class="main">

      <div class="background">

            <div class="header">

                <ul id="menu">  
                    <li><a href="">Home</a></li>  
                    <li><a href="">Tours</a></li>  
                    <li><a href="">Hotels</a></li>  
                    <li><a href="">Cruises</a></li>  
                    <li><a href="">Arrivals</a></li>  
                    <li><a href="">Destinations</a></li>  
                </ul> 

                <div class="logo">  
                  <h1>Rippe Travels</h1>  
                </div> 

            </div> 



    <br>

    <div class="content2">

        <div class="intro">
        <h2>Travel planning starts here....</h2>
        <p class="intro_font" ><img src="images/intro.png" class="intro_pic" align="right">Whether you’re looking for hotels, flights, cruises or vacation packages, we make it easy to plan and book virtually any trip. Extraordinary starts with Rippe Travels.<br><br>
        It may be the vacation of your dreams, but sometimes nightmarish things happen. Choose one of our comprehensive plans, or build the travel insurance package that will give you the peace of mind you need.<br><br>
        Protect yourself from theft or lost credit cards with American Express Travelers Cheques. They never expire and are accepted at thousands of locations worldwide. We'll replace them if they're lost or stolen, and we're here to offer assistance 24/7. 
        </p>

        </div>
    </div>


    <div class="content1">

        <div class="flights">
        <h3>Flights</h3>
        <p>A small descriptive text goes here, about the planes we have.</p>
        <img class="flight_pic" src="images/flights.png" alt="flight"><img src="images/flights1.png" alt="price" width="92" height="69" class="flight_price">
        </div>

        <div class="cruises">
        <h3>Cruises</h3>
        <p>A small descriptive text goes here, about the planes we have.</p>
        <img class="cruises_pic" src="images/cruises.png" alt="cruises">
        <img src="images/cruises1.png" alt="price" width="102" height="69" class="cruises_price">
        </div>

        <div class="vacations">
        <h3>Vacations</h3>
        <p>A small descriptive text goes here, about the planes we have.</p>
        <img class="vacations_pic" src="images/vacations.png" alt="vacations">
        <img src="images/vacations1.png" alt="price" width="114" height="69" class="vacations_price">
        </div>

    </div>

      </div>

    </div>
</div>

<div style="position:absolute;">
Copyright... bla bla bla.....
</div>







  </body>
  </html>

booboo.css 页面..

body {    
    font-family:Arial, Helvetica, sans-serif;  
    color:#7f7d78; 
    background:#daf0f6 url(images/background_slice.png) repeat-x;
    height:100%;
    position:relative;
} 

.main {

}
.main .background {
    background-image:url(images/background.png);  
    background-repeat:no-repeat;  
    min-height:100%; 
}
.main .background .header {
}
.wrap {
    margin: auto;
    min-height:100%;
    width: 1024px;
}
.wrap .main .background .logo {
    background-image:url(images/logo.png);  
    background-repeat:no-repeat;  
    width:194px;  
    height:83px;
}


.wrap .main .background .logo h1, .logo small {  
    margin:0px;  
    display:block;  
    text-indent:-9999px;  
}  

ul#menu {
    margin: 0px;
    padding: 0px;
    position: absolute;
    right: 100px;
    top: 26px;
}  
ul#menu li {  
    display:inline;  
    margin-left:12px;  
}  
ul#menu li a {  
    text-decoration:none;  
    color:#716d6a;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    font-size:10px;  
    font-weight:bold;  
    text-transform:uppercase;  
}  
ul#menu li a.active, ul#menu li a:hover {  
    color:#211e1e;  
}  

#slider_container {
    background-image:url(images/slider_background.png);  
    background-repeat:repeat-x;  
    display:block; 
    border:1px solid #ffffff;
    padding:10px;
    overflow:auto;
}
.wrap .main .background .content2 {
    width: 1024px;
    float:left;
}
.wrap .main .background .content2 .intro {
    padding-left: 20px;
    padding-top: 5px;
    width: 1005px;
    height: 200px;
    background-image: url(images/content_background.png);
    background-repeat: repeat-x;
    border:1px solid #ffffff;
}
.wrap .main .background .content2 .intro .intro_font {
    font-size: 13px;
}
.wrap .main .background .content2 .intro .intro_font .intro_pic {
    padding: 5px;
}
.wrap .main .background .content1 {
    width: 1024px;
    float:left;
}
.wrap .main .background .content1 .flights {
    width: 284px;
    background-image: url(images/content_background.png);
    background-repeat: repeat-x;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    margin-right: 22px;
    border:1px solid #ffffff;
}
.wrap .main .background .content1 .flights .flight_pic {
    float: left;
}
.wrap .main .background .content1 .flights .flight_price {
    float: right;
}


.wrap .main .background .content1 .cruises {
    width: 285px;
    height: 195px;
    background-image: url(images/content_background.png);
    background-repeat: repeat-x;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    margin-right: 22px;
    border:1px solid #ffffff;
}
.wrap .main .background .content1 .cruises .cruises_pic {
    float: left;
}
.wrap .main .background .content1 .cruises .cruises_price {
    float: right;
}
.wrap .main .background .content1 .vacations .vacations_pic {
    float: left;
}
.wrap .main .background .content1 .vacations .vacations_price {
    float: right;
}




.wrap .main .background .content1 .vacations {
    width: 285px;
    height: 195px;
    background-image:url(images/content_background.png);  
    background-repeat:repeat-x;
    padding-left:20px;
    padding-right:20px;
    float:left;
    border:1px solid #ffffff;
}

.wrap .main .background .content1 h3 {
    color:#32c0da;
}
.footer {
    background-color:#32c0da;
    margin-bottom:0px;
    width:100%;
}

觉得是时候给我点东西了.....

【讨论】：

【解决方案3】：

你去吧……这就是你想要的……？？

    <html>
<head>
<style>
body {    
    font-family:Arial, Helvetica, sans-serif;  
    color:#7f7d78; 
    background:#daf0f6 url(images/background_slice.png) repeat-x;
    height:100%;
    position:relative;
} 

.main {

}
.main .background {
    background-image:url(images/background.png);  
    background-repeat:no-repeat;  
    min-height:100%; 
}
.main .background .header {
}
.wrap {
    margin: auto;
    min-height:100%;
    width: 1024px;
}
.wrap .main .background .logo {
    background-image:url(images/logo.png);  
    background-repeat:no-repeat;  
    width:194px;  
    height:83px;
}


.wrap .main .background .logo h1, .logo small {  
    margin:0px;  
    display:block;  
    text-indent:-9999px;  
}  

ul#menu {
    margin: 0px;
    padding: 0px;
    position: absolute;
    right: 100px;
    top: 26px;
}  
ul#menu li {  
    display:inline;  
    margin-left:12px;  
}  
ul#menu li a {  
    text-decoration:none;  
    color:#716d6a;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    font-size:10px;  
    font-weight:bold;  
    text-transform:uppercase;  
}  
ul#menu li a.active, ul#menu li a:hover {  
    color:#211e1e;  
}  

#slider_container {
    background-image:url(images/slider_background.png);  
    background-repeat:repeat-x;  
    display:block; 
    border:1px solid #ffffff;
    padding:10px;
    overflow:auto;
}
.wrap .main .background .content2 {
    width: 1024px;
    float:left;
}
.wrap .main .background .content2 .intro {
    padding-left: 20px;
    padding-top: 5px;
    width: 1005px;
    height: 200px;
    background-image: url(images/content_background.png);
    background-repeat: repeat-x;
    border:1px solid #ffffff;
}
.wrap .main .background .content2 .intro .intro_font {
    font-size: 13px;
}
.wrap .main .background .content2 .intro .intro_font .intro_pic {
    padding: 5px;
}
.wrap .main .background .content1 {
    width: 1024px;
    float:left;
}
.wrap .main .background .content1 .flights {
    width: 284px;
    background-image: url(images/content_background.png);
    background-repeat: repeat-x;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    margin-right: 22px;
    border:1px solid #ffffff;
}
.wrap .main .background .content1 .flights .flight_pic {
    float: left;
}
.wrap .main .background .content1 .flights .flight_price {
    float: right;
}


.wrap .main .background .content1 .cruises {
    width: 285px;
    height: 195px;
    background-image: url(images/content_background.png);
    background-repeat: repeat-x;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    margin-right: 22px;
    border:1px solid #ffffff;
}
.wrap .main .background .content1 .cruises .cruises_pic {
    float: left;
}
.wrap .main .background .content1 .cruises .cruises_price {
    float: right;
}
.wrap .main .background .content1 .vacations .vacations_pic {
    float: left;
}
.wrap .main .background .content1 .vacations .vacations_price {
    float: right;
}




.wrap .main .background .content1 .vacations {
    width: 285px;
    height: 195px;
    background-image:url(images/content_background.png);  
    background-repeat:repeat-x;
    padding-left:20px;
    padding-right:20px;
    float:left;
    border:1px solid #ffffff;
}

.wrap .main .background .content1 h3 {
    color:#32c0da;
}
.footer {
    background-color:#32c0da;
    margin-bottom:0px;
    width:100%;
}
</style>
</head>
<body>
<div class="wrap">

    <div class="main">

      <div class="background">

            <div class="header">

                <ul id="menu">  
                    <li><a href="">Home</a></li>  
                    <li><a href="">Tours</a></li>  
                    <li><a href="">Hotels</a></li>  
                    <li><a href="">Cruises</a></li>  
                    <li><a href="">Arrivals</a></li>  
                    <li><a href="">Destinations</a></li>  
                </ul> 

                <div class="logo">  
                  <h1>Rippe Travels</h1>  
                </div> 

            </div> 



    <br>

    <div class="content2">

        <div class="intro">
        <h2>Travel planning starts here....</h2>
        <p class="intro_font" ><img src="images/intro.png" class="intro_pic" align="right">Whether you’re looking for hotels, flights, cruises or vacation packages, we make it easy to plan and book virtually any trip. Extraordinary starts with Rippe Travels.<br><br>
        It may be the vacation of your dreams, but sometimes nightmarish things happen. Choose one of our comprehensive plans, or build the travel insurance package that will give you the peace of mind you need.<br><br>
        Protect yourself from theft or lost credit cards with American Express Travelers Cheques. They never expire and are accepted at thousands of locations worldwide. We'll replace them if they're lost or stolen, and we're here to offer assistance 24/7. 
        </p>

        </div>
    </div>


    <div class="content1">

        <div class="flights">
        <h3>Flights</h3>
        <p>A small descriptive text goes here, about the planes we have.</p>
        <img class="flight_pic" src="images/flights.png" alt="flight"><img src="images/flights1.png" alt="price" width="92" height="69" class="flight_price">
        </div>

        <div class="cruises">
        <h3>Cruises</h3>
        <p>A small descriptive text goes here, about the planes we have.</p>
        <img class="cruises_pic" src="images/cruises.png" alt="cruises">
        <img src="images/cruises1.png" alt="price" width="102" height="69" class="cruises_price">
        </div>

        <div class="vacations">
        <h3>Vacations</h3>
        <p>A small descriptive text goes here, about the planes we have.</p>
        <img class="vacations_pic" src="images/vacations.png" alt="vacations">
        <img src="images/vacations1.png" alt="price" width="114" height="69" class="vacations_price">
        </div>

    </div>

      </div>

    </div>
</div>

<div style="position:absolute;">
Copyright... bla bla bla.....
</div>







  </body>
  </html>

【讨论】：

是的..这就是我想要的..你做了什么改变？我想保持css文件分开..

【解决方案4】：

检查一下，我已经把页脚固定在底部了

http://codepen.io/anon/pen/Cdyhv

</div>
<div class="footer">Copy Rights</div>

</body>

.footer {
  background-color:#32c0da;
  position:fixed;
  width:100%;
  height:50px;
  bottom:0;
  left:0;
}

【讨论】：

【解决方案5】：

确保您的页脚不在所有其他 div 标签中

<style>
  .footer {
       position:absolute;
       bottom:0;
       width:100%;
       background:#6cf;

    }
</style>
<body>
<!-- other div elements -->
<!-- footer -->
<div class="footer">whatever text... bla bla bla...</div>
</body>

希望对你有所帮助.....

【讨论】：

【解决方案6】：

你所做的应该有效。

例如：

<div class="footer"></div>

.footer {
   position:absolute;
   bottom:0;
   width:100%;
   background:#6cf;
   height: 100px;
}

看看这个小提琴：http://jsfiddle.net/2xLJ6/

【讨论】：

但是这样一来，一旦页面变得可滚动，页脚就不会再绑定到该页面的底部了？
要在滚动时将其定位在底部，您需要使用position:fixed
我不希望它滚动..我需要页面末尾的页脚..像大多数其他普通页面一样..