如何在我的內容的最底部浮動我的div

如何將我的div浮動在我的內容的最底部？所以在我的頁面結束時沒有多長時間（由內容生成）我想要某種頁腳，但我不想使用頁腳標籤，我需要在其他頁面中實現aswel 。如何在我的內容的最底部浮動我的div

在這種情況下，它是關於分割類= 「底部」

我的代碼是下面

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, user-scalable=yes"> 
    <title>Moworkflow app</title> 
    <link rel="stylesheet" type="text/css" href="advertentie.css" /> 
<head> 
<body> 

<!-- wrapper --> 
<div id="wrapper"> 

<!-- header --> 
<div id="header" align="center"> 
<ul> 
    <li><a href="#">img logo</a></li> 
    <li><a href="#">Aanbod</a></li> 
    <li><a href="#">Vraag</a></li> 
</ul> 
</div> 

<!-- filter --> 
<div id="filter"> 
</div> 


<!-- content --> 
<div id="content" align="center"> 
    <table cellspacing="10" class="tablestyle"> 
     <tr> 
     <td><h3>Advertentiegegevens</h3></td> 
     </tr> 
     <tr> 
     <td>Soortnaam</td> 
     </tr> 
     <tr> 
     <td><input type="text" class="invoerveld"></td> 
     </tr> 
     <tr> 
     <td>Kleur</td> 
     </tr> 
     <tr> 
     <td><input type="text" class="invoerveld"></td> 
     </tr> 
     <tr> 
     <td>Aantal</td> 
     </tr> 
     <tr> 
     <td><input type="text" class="invoerveld"></td> 
     </tr> 

     <tr> 
     <td>Prijs</td> 
     </tr> 
     <tr> 
     <td><input type="text" class="invoerveld"></td> 
     </tr> 
    </table> 
</div> 

<!-- bottom --> 
<div id="bottom" align="center"> 
</div> 
</body> 
</html> 

body { 
    margin:0; 
    width:100vw; 
    background:#fff; 
    font-family: arial; 
} 

#wrapper { 
    position: absolute; 
    height: 100%; 
    min-height: 456px; 
    width: 100%; 
} 

#header { 
    position: fixed; 
    width: 100%; 
    height: 60px; 
    background: #0d82d7; 
    z-index: 4; 
    opacity: 0.96; 
} 

ul { 
    display: table; 
    width: 100%; 
    height: 60px; 
    list-style: none; 
    padding-left:0; 
    margin:0; 
} 

li { 
    display: table-cell; 
    text-align: center; 
    line-height: 60px; 
    text-decoration: none; 
    border-right: 1px solid #0d82d7; 
} 

li a { 
    text-decoration: none; 
    color: white; 
} 



#filter { 
    background: #0873c0; 
    position: fixed; 
    top: 60px; 
    width: 100%; 
    height: 30px; 
    z-index: 3; 
    opacity: 0.96; 


} 






#content { 
    position: absolute; 
    background-color: white; 
    width: 100%; 
    top: 70px; 
    margin-top: 20px; 
    bottom: 30px; 
    display: table; 
    z-index: 0; 
} 

.tablestyle { 
    width: 100%; 
    padding: 5px; 
    padding-left: 50px; 
    padding-right: 50px; 
} 

.invoerveld { 
    width: 100%; 
    height: 30px; 
    border-radius: 5px; 
    border-color: #0d82d7; 
    border-style: solid; 
    border-width: 1px; 
    margin-bottom: 10px; 

} 


#bottom { 
    position: relative; 
    width: 100%; 
    background-color: #0d82d7; 
    height: 30px; 
    bottom: 0px; 
    margin-bottom: 0px; 
    opacity: 0.9; 
}

來源

2014-09-29 Kevin Ammerlaan

變化底部ID的CSS與此：

#bottom { 
    position: fixed; 
    width: 100%; 
    background-color: #0d82d7; 
    height: 30px; 
    margin-bottom: 0px; 
    opacity: 0.9; 
    bottom:0; 
}

還要檢查的jsfiddle，你想要它是這樣或不是？

http://jsfiddle.net/ew6xyp66/

來源

2014-09-29 11:46:26 DeDevelopers

這只是固定的，我不希望它是可見的所有時間需要浮動下面的內容。 – 2014-09-29 11:53:06

OP請求頁腳在內容下面浮動無論多長時間，在您的解決方案中，頁腳無論內容高度如何都會卡在頁面的底部......如果它更長> http://jsfiddle.net/ew6xyp66/1/ – webkit 2014-09-29 11:53:18

@KevinAmmerlaan是你想要的嗎？ http://jsfiddle.net/ew6xyp66/2/ – DeDevelopers 2014-09-29 11:57:14

如果你希望你的頁腳按照你的內容，你應該刪除這個：

#content {position:absolute;}

原因是，絕對定位的元素被取出，因此頁面正常流量以下的兄弟姐妹元素並不像它們通常那樣位於它們下面。

UPDATE：避免頁腳+含量比瀏覽器身高矮，你可以給你的內容100％的高度減去你的頭的高度..是這樣的：

#content {min-height:calc(100% - 50px);}

瀏覽器支持：http://caniuse.com/#search=calc

UPDATED DEMO

來源

2014-09-29 11:46:35 webkit

看起來不錯，謝謝。它漂浮在內容下方，但現在如果內容小於瀏覽器大小，則頁腳將在屏幕中間結束。有沒有辦法來解決這個問題？ – 2014-09-29 11:54:34

是的，你可以使用calc來給出最小高度。我會更新答案。 – webkit 2014-09-29 11:57:06

是的，這真棒，但我看到我的內容現在升起。內容不處於以前的狀態。這與你的改變有什麼關係？它移動到我的導航/標題欄下方 – 2014-09-29 12:08:37

.bottom { 
    position:absolute; 
    bottom:0; 
    left:0;right:0; 
    margin:auto auto; 
}

這種對齊的元素的東西底部，如果喲你希望它包含然後給父母position:relative;

來源

2014-09-29 11:53:26 zxc

如何在我的內容的最底部浮動我的div

回答

相關問題