將元素置於高度的底部：100％div

我想將一個按鈕「釘」到一個側邊欄div的底部，該側邊欄的高度爲100％，因爲它應該填充整個左側頁。將元素置於高度的底部：100％div

我試圖做這樣說：

.sidebar { 
 
    height: 100%; 
 
    position: relative; 
 
    background-color: #CCCCCC; 
 
} 
 
.btn { 
 
    position: absolute; 
 
    bottom:0px; 
 
    top: auto; 
 
}

<div class="sidebar"> 
 
    <button class="btn">Button</button> 
 
</div>

這可能是因爲在％的高度，因爲它與一個像素高度的工作，但必須有某種方式用百分比完成這項工作，因爲側邊欄必須跨越整個頁面高度。

來源

2015-11-01 aWdas

爲了解決這個問題，給你html和body的100％以下的高度。現在他們沒有定義高度集（所以他們是0px高），所以你的按鈕是技術上已經在底部。

活生生的例子：

html, body { 
 
    height: 100%; 
 
} 
 

 
.sidebar { 
 
    height: 100%; 
 
    position: relative; 
 
    background-color: #CCCCCC; 
 
} 
 
.btn { 
 
    position: absolute; 
 
    bottom:0; 
 
}

<div class="sidebar"> 
 
    <button class="btn">Button</button> 
 
</div>

來源

2015-11-01 17:23:03

我標記您的評論是正確的，因爲它確實是解決問題的辦法。不過，我已經實施了該解決方案。問題在於我用一個Bootstrap-Navbar「推」整頁51px，因此推出了「bottom：0」按鈕。使用「底部：51px」解決了它。 – aWdas

問題是你的容器沒有任何實際的高度。您需要在html和body標籤上定義高度，以使用百分比高度。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.sidebar { 
 
    height: 100%; 
 
    position: relative; 
 
    background-color: #CCCCCC; 
 
} 
 
.btn { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    top: auto; 
 
}

<div class="sidebar"> 
 
    <button class="btn">Button</button> 
 
</div>

來源

2015-11-01 17:22:40 Nit

將元素置於高度的底部：100％div

回答

相關問題