将元素置于高度的底部：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

回答

相关问题