CSS DIV /页脚不在底部
[英]CSS DIV / Footer Not at Bottom
问题描述
I am having a problem with css... 
我在使用CSS时遇到问题...
I made the web page one by one using div containers and after finishing i wanted to put the footer at the bottom.. 我使用div容器一张一张地制作了网页，完成后我想将页脚放在底部。
but now when ever i write something its not going below everything.. Instead it popup's at the middle of the page.. and to the right.. 但是现在无论何时我写的东西都不会落在所有内容的下面。相反，它的弹出窗口位于页面的中间。
I tried using css and bottom:0; 我尝试使用css和bottom:0; and many other things... But not only the footer but any new container/div is going in the middle of the page not below everything.. 以及其他许多内容...但是，不仅页脚而且所有新容器/ div都将在页面中间而不是所有内容的下面。
.footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
}
Not working :( 不工作:(
http://jsfiddle.net/sDN7w/ http://jsfiddle.net/sDN7w/
I put css and html code there.. but without images it is messed up.. but still the copyrights are comming to the top... even there... If nothing works i will upload the whole thing to a site so you guys can see it clearly.. 我把css和html代码放在那儿..但是没有图像，它被弄乱了..但是版权仍然在顶部...即使在那儿...如果没有用，我会把整个东西上传到一个网站上，以便你们可以看清楚
6 个解决方案
解决方案1
1 2013-11-23 10:21:56
What you've done should work. 您所做的应该有效。
For example: 例如：
<div class="footer"></div>
.footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
height: 100px;
}
Take a look at this fiddle: http://jsfiddle.net/2xLJ6/ 看看这个小提琴： http : //jsfiddle.net/2xLJ6/
解决方案2
0 2013-11-23 10:31:59
make sure that your footer is out of all other div tags 确保页脚不在所有其他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>
Hope that helps..... 希望能有所帮助.....
解决方案3
0 2013-11-23 10:40:32
check out this fiddle 看看这个小提琴
http://jsfiddle.net/vigneshvdm/AM6MX/1/ http://jsfiddle.net/vigneshvdm/AM6MX/1/
HTML HTML
<div class="footer">provide footer text here
</div>
<div class="other"></div>
<div class="other"></div>
CSS 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;
}
In your case the problem is that the BOTTOM position will be overwritten by the TOP value. 您的问题是底部位置将被TOP值覆盖。 So you can try giving the top value instead which will work !! 因此，您可以尝试提供最高的价值，而这将起作用！ You can check it here 你可以在这里检查
解决方案4
0 2013-11-23 11:07:02
Check this, i have put the footer fixed to the bottom 检查一下，我将页脚固定在底部
http://codepen.io/anon/pen/Cdyhv 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
there ya go... was this what u wanted.. ?? 你去...那是你想要的.. ??
<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
the html page.... 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>
the booboo.css page.. 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%;
}
think it's time u give me something..... 认为是时候给我些东西了.....
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在div底部获得页脚 - Get footer at bottom of div
页脚 <div> 滚动时不停留在页面底部-CSS和HTML - Footer <div> not staying at bottom of page when I scroll - CSS & HTML
CSS：将div元素垂直和水平放置在中间，将页脚放置在底部 - CSS: position a div element vertically and horizontally in the center, position footer at the bottom
CSS页脚位于底部，但并非位于底部 - CSS footer at the bottom but not not at the very bottom
CSS：页脚不会走到尽头？ - Css: Footer not going to bottom?
用CSS放置页脚底部 - placed a footer bottom with CSS
将CSS页脚放在底部 - Sticking CSS footer on bottom
CSS 保持页脚在底部 - CSS keep footer at bottom
CSS页脚不在页面底部 - CSS Footer not at the bottom of the page
带有“bottom:0”CSS 属性的页脚 - Footer with "bottom:0" CSS attribute
相关标签