堆栈内存溢出
  繁体   English   中英

CSS DIV /页脚不在底部

[英]CSS DIV / Footer Not at Bottom

 原文  2013-11-23 10:13:39  1   6    html/ css/ css3

问题描述

我在使用CSS时遇到问题...

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

但是现在无论何时我写的东西都不会落在所有内容的下面。相反，它的弹出窗口位于页面的中间。

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

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

不工作:(

http://jsfiddle.net/sDN7w/

我把css和html代码放在那儿..但是没有图像，它被弄乱了..但是版权仍然在顶部...即使在那儿...如果没有用，我会把整个东西上传到一个网站上，以便你们可以看清楚

6 个解决方案

解决方案1
 1  2013-11-23 10:21:56

您所做的应该有效。

例如： 

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

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

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

解决方案2
 0  2013-11-23 10:31:59

确保页脚不在所有其他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>

希望能有所帮助.....

解决方案3
 0  2013-11-23 10:40:32

看看这个小提琴

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

您的问题是底部位置将被TOP值覆盖。 因此，您可以尝试提供最高的价值，而这将起作用！ 你可以在这里检查

解决方案4
 0  2013-11-23 11:07:02

检查一下，我将页脚固定在底部

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
 0  2013-11-23 11:14:03

你去...那是你想要的.. ?? 

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

解决方案6
 0  2013-11-23 11:31:15

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

认为是时候给我些东西了.....

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在div底部获得页脚 页脚 <div> 滚动时不停留在页面底部-CSS和HTML CSS：将div元素垂直和水平放置在中间，将页脚放置在底部 CSS页脚位于底部，但并非位于底部 CSS：页脚不会走到尽头？ 用CSS放置页脚底部 将CSS页脚放在底部 CSS 保持页脚在底部 CSS页脚不在页面底部 带有“bottom:0”CSS 属性的页脚
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM