Question

我遇到了css的问题......

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

但是现在，当我写下一些东西时，它不会低于一切......相反，它弹出窗口的中间位置......并且向右......

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

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

不工作：（

http://jsfiddle.net/sDN7w/

我把css和html代码放在那里..但没有图像它搞砸了..但版权仍然是顶部...甚至那里...如果没有任何作用我将上传整个东西到一个网站所以你们可以清楚地看到它..

Answer 1

你所做的工作应该有效。

例如：

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

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

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

Answer 2

确保您的页脚超出所有其他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>

希望有帮助.....

Answer 3

看看这个小提琴

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

Answer 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;
}

Answer 5

有你去......这就是你想要的...... ??

    <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>

Answer 6

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%;
}

认为是时候给你点东西.....

CSS DIV /页脚不在底部

6 个答案: