如何獲取div，使其始終達到底部？

我將高度設置爲100％。我希望div能夠到達頁面底部，無論底部有多少信息，除了底部300px的邊距。

目前我還沒有在底部設置保證金。如你所見，它不會到達頁面的底部，我也想要它。我認識你的電腦，因爲我的屏幕相當大。

該DIV被稱爲「包裝」。

HTML

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<title>Design At Ease - Home</title> 
</head> 
<body> 
<div id="header"> 
<div id="logo"><a class="logoclass">DesignAtEase.com</a></div> 
<ul id="headerlinks"> 
<li><a href="index.html">Home</a></li> 
<li><a href="coding.html">Coding</a></li> 
<li><a href="graphics.html">Graphics</a></li> 
<li><a href="database.html">Database</a></li> 
<li><a href="support.html">Support</a></li> 
<li><a href="more.html">More</a></li> 
</ul> 
</div> 
<ul id="quicklinks"> 
<li><a href="quickstart.html">Quick Start</a></li> 
<li><a href="tagsmain.html">Tag Helper</a></li> 
<li><a href="html.html">HTML</a></li> 
<li><a href="css.html">CSS</a></li> 
<li><a href="photoshop.html">Photoshop</a></li> 
</ul> 
<div id="wrapper"></div> 
</body> 
</html>

CSS

body{ 
background:#fffffc; 
margin: auto auto; 
} 

#header{ 
background:#e5e5e5; 
height:35px; 
width:100%; 
border-bottom: 1px #c9c9c9 solid; 
} 

#headerlinks{ 
position:relative; 
display:inline; 
float:right; 
margin-right:5%; 
bottom:37px; 
} 

#headerlinks li{ 
display:inline; 
padding-left:25px; 
} 

#headerlinks li a{ 
color:#777777; 
display:inline; 
font-size:18px; 
font-family: sans-serif; 
text-decoration:none; 
} 

#headerlinks li a:hover{ 
color:#a3a3a3; 
display:inline; 
font-size:18px; 
font-family: sans-serif; 
text-decoration:none; 
} 


#headerlinks li a:active{ 
color:#00B2EE; 
display:inline; 
font-size:18px; 
font-family: sans-serif; 
text-decoration:none; 
} 


#logo{ 
position:relative; 
color:black; 
margin-left:5%; 
top:5px; 
} 

.logoclass{ 
color:#212121; 
display:inline; 
font-size:24px; 
font-family: sans-serif; 
text-decoration:none; 
} 

#quicklinks{ 
width:90%; 
margin-left:auto; 
margin-right:auto;; 
height:25px; 
background:#e5e5e5; 
border-bottom: 1px #c9c9c9 solid; 
border-left: 1px #c9c9c9 solid; 
border-right: 1px #c9c9c9 solid; 
top:-46px; 
position:relative; 
clear: right; 
} 

#quicklinks li{ 
position:relative; 
top:2px; 
display:inline; 
padding-right:20px; 
} 

#quicklinks li a{ 
color:#777777; 
display:inline; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
} 

#quicklinks li a:hover{ 
color:#a3a3a3; 
display:inline; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
} 

#quicklinks li a:active{ 
color:#00B2EE; 
display:inline; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
} 


#wrapper{ 
position:relative; 
top:-62px; 
margin-left: auto; 
margin-right: auto; 
width:90%; 
height:100%; 
background:#fafafa; 
border-left: 1px #c9c9c9 solid; 
border-right: 1px #c9c9c9 solid; 
}

來源

2013-06-27 Adam DePolo

這裏的解決方案，我一直使用。 http://www.cssstickyfooter.com/

您設置：

html, body {height: 100%;}

添加您爲300px底部間隙，主包裝，然後切緣陰性-300px到頁腳覆蓋它那上面填充。

使用一個巨大的包裝器之外的所有頁腳：

<div id="wrap"> 
    <div id="main"> 
    </div> 
</div> 
<div id="footer"> 
</div>

檢查出鏈接瞭解更多。

乾杯！

來源

2013-06-27 23:30:25 KruegerDesigns

使用高度100％會佔用容器的100％的高度 - 所以你需要身體和HTML設置爲100％的高度了。

來源

2013-06-27 23:08:34 sync

我這樣做，它仍然是一樣的。 –

設置* {height：100％; }然後設置#MyDiv {height：100％;背景：＃333; }這應該很好。 – Jake

哪個div我需要設置。 –

我認爲你想在頁面底部粘#wrapper（除了底部的一些空間）

我已經改變了你的代碼在小提琴：http://jsfiddle.net/FgGn5/

#wrapper{ 
position:absolute; 
bottom:20px; 
margin: 0 5%; 
width:90%; 
height:20px; 
background:red; 
border-left: 1px #c9c9c9 solid; 
border-right: 1px #c9c9c9 solid; 
}

它需要一個absolute位置堅持到底部。由於absolute的立場，我們被迫指定margin-right和margin-left。幸運的是，由於基數爲width，這很簡單。

希望它有幫助。

來源

2013-06-27 23:09:13

根據我的經驗，您將通過採用JavaScript解決方案在各種常見瀏覽器中獲得最佳成功。我強烈建議使用jQuery讓你的生活更輕鬆一點。然後，您可以基本上將#wrapper DIV設置爲等於身高減去#header和#quicklinks。這將是這個樣子：

var windowHeight = $(window).height(); 
var headerHeight = $('#header').outerHeight(false); 
var linksHeight = $('#quicklinks').outerHeight(false); 
var wrapperHeight = windowHeight - (headerHeight + linksHeight); 

$('#wrapper').css('min-height', wrapperHeight);

注：我使用的最小高度的製作，因爲#wrapper指定DIV的內容可能其實已經把它推到屏幕的底部。

看到這個搗鼓一個快速和骯髒的例子：http://jsfiddle.net/HLJJc/

來源

2013-06-27 23:16:14 Dresden

如何獲取div，使其始終達到底部？

回答

相關問題