如何在調整大小時將html元素固定在窗口的底部，但不要滾動？

我試圖完全按照this page這樣做，如果您調整第二頁的大小，您會注意到容器標題（帶有電話號碼，地址和「現在預訂」按鈕的標題）保持固定在底部該窗口，但如果您開始向下滾動頁面，則可以繼續使用其餘內容。我怎樣才能做到這一點？如何在調整大小時將html元素固定在窗口的底部，但不要滾動？

我使用Twitter的引導3

來源

2016-07-26 Pakitorocker

請在代碼（HTML/CSS/JS）的**代碼**（https://blog.stackoverflow.com/2014/09/introducing-runnable- JavaScript的CSS和 - HTML的代碼段/）。參見[mcve]和[問]。 – vanburen

我很困惑。如果您開始滾動，它不會固定在窗口的底部。它似乎對我來說像一個常規元素，現在書本按鈕被卡在頁面的底部。（作爲一個單獨的元素）我錯過了什麼？ –

我不認爲元素卡在屏幕底部，我認爲包含圖像的區域縮小到一定的百分比，因此給人的感覺是其他元素粘在底部。如果您使用鼠標快速調整v的大小，您會在圖片大小調整時看到延遲（無論如何，在Chrome中）。沒有詳細看CSS，但這是我的印象。無論如何，我只是在調整大小時將元素貼到底部，這並不是css的工作原理。 – ADyson

他們使用calc(100vh - 75px)計算頂部div的高度。因此，第一個div將始終覆蓋整個視口高度（100vh）減75px。

.property-page .full-screen { 
    min-height: calc(100vh - 75px); 
    height: calc(100vh - 75px); 
}

的「立即預訂」按鈕只是position:fixed;

事情是這樣的一個元素應該做你想要什麼：

https://jsfiddle.net/zaw0mptm/2/

來源

2016-07-26 16:27:38

正是我想要做的，所以根本沒有任何修復，只根據窗口高度調整第一個div的大小。謝謝！ – Pakitorocker

您可以檢查它

<body> 
    <div id="footer"></div> 
</body>

然後用這個css

#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:100px; 
    background:blue;//optional 
}

來源

2016-07-26 16:52:20

如何在調整大小時將html元素固定在窗口的底部，但不要滾動？

回答

相關問題