將所有內容與頁面底部對齊？

我正在嘗試將html頁面與瀏覽器窗口的底部對齊。這是我的apporach：將所有內容與頁面底部對齊？

<body> 
    <div class="outer-wrapper"> 
    </div> 
</body> 

.outer-wrapper{ 
    min-height: 950px; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
}

這種解決方案的問題是，當屏幕是小於950像素高，外包裝紙在前看不見屏幕上方的頂部，並沒有滾動加入。身體和外包裝都有背景圖像。

下面是一個示例，如您所見，紅色框的頂部位於主體上方。從您的代碼 http://jsfiddle.net/C5Nce/1/

來源

2013-01-21 Himmators

你的包裝是否需要950px的最小高度？ – George

是的，它有圖形（還有內容）。雖然我可以設置高度950px – Himmators

所以，你想要的東西是固定在頁面的底部，但也得到滾動條，如果身體小於絕對定位的元素？ – boz

下面的演示應該工作，如果我理解你想要什麼正確：

http://jsfiddle.net/C5Nce/10/show/

我只是用媒體查詢，以檢測當頁面小於550px，並設置元素被固定到頂端，而不是：

@media screen and (max-height: 550px) { 
     .outer_wrapper { 
      top: 0; 
     } 
}

我把它綠色的，所以你可以知道什麼時候查詢觸發。

來源

2013-05-15 06:58:04

-1

編輯部分here

.outer_wrapper 
{ 
    background-color:red; 
    /*min-height: 550px;*/ 
    margin-left: -75px; 
    top:auto; 
    bottom: 0; 
    position: absolute; 
    left:50%; 
}

和您指定的紅框是人體上面，如果你把它體內它應該被放置喜歡它，你也有指定容器的min-height。

來源

2013-01-21 09:17:37 Rohit416

如果我添加top：0，則.outer-wrapper與頁面頂部對齊，而不是底部... – Himmators

我指定爲零，因爲我認爲您希望容器可以在調整頁面大小時保持其大小爲我工作。 – Rohit416

你可以發佈它的屏幕截圖嗎？ – Rohit416

我只想給你outer-wrapper的100％（含HTML，身體沿）的高度：

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

.outer-wrapper { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    overflow-y: auto; 
    background-position:bottom; //Edit 
}

然後outer-wrapper將始終保持身體的高度。不需要最小950px的高度，因爲在視口太小的情況下，您希望此視圖滾動，而在另一種情況下，視口大於950px - 呃，它大於950px - 這是件好事。

來源

2013-01-21 09:20:08 George

此解決方案的問題在於.outer包裝具有背景。當我滾動時，背景不會顯示在下方。 – Himmators

'外包裝器'背景將仍然與div內容一起滾動。如果你想改變這個，你可以使用['background-attachment']（https://developer.mozilla.org/en-US/docs/CSS/background-attachment）屬性。 – George

我正在嘗試將背景與文檔的底部對齊。 – Himmators

.outer { 
    position:absolute; 
    height:100%; 
    width:100%; 
    background-color:#aaaaaa; 
    margin:0; 
    padding:0; 
} 
.content { 
    position:relative; 
    width:90%; 
    height:90%; 
    background-color:#444444; 
    margin:5%; 
} 
.inner { 
    position:absolute; 
    height:20%; 
    width:100%; 
    background-color:#eeeeee; 
    bottom:0; 
    margin-bottom:10%; 
}

<div class="outer"> 
    <div class="content"> 
     <div class="inner"></div> 
    </div> 
</div>

http://jsfiddle.net/L8H9J/

1）從內部類中刪除邊距風格

2）所有你的內部類中添加將內容與底部對齊

3）由於HTML文檔的流程，你不能明確地與內部類中的底部

4）您可以使用這一招的話，但同樣所有元素對齊它們將與流的position:static

5）來使用JavaScript來確定內部每個元素合適邊緣內部類

提示：Use percentages; although you want the wrapper to be of height ~950px, but if you can use percentages for the dimensions, you would really love watching your web applications scale with the browsers:

來源

2013-01-21 09:40:51 GLES

http://jsfiddle.net/L8H9J/2/ - 這個有很酷的影子：D – GLES

將所有內容與頁面底部對齊？

回答

相關問題