Twitter bootstrap 重新调整高度以匹配内容的DIV

我目前正在使用Bootstrap设计一个网站。我的页面的div标记中包含的内容横跨页面的整个宽度（宽度：100%），但是我必须使用数字px值（即“250px”）设置我的高度，否则div从上到下横跨整个页面，如果我去掉宽度并设置最小宽度，也会发生这种情况。无论如何，我可以设置一个最小宽度，然后让div在需要时展开。以下是我的相关CSS代码：

.cd {
    width: 100%;
    height: 250px;
    background: rgba(0,0,0,1);

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
    padding: 30px;
    padding-left: 25%;
    padding-right: 25%;
} 

谢谢你的帮助

编辑：

尝试替换

height: 250px;

与

---

它需要整个高度，因为您使用的是绝对定位，并且您正在将底部值设置为零

如果您确实需要绝对定位，您可以将css修改为以下内容

.cd {
    width: 100%;
    background: rgba(0,0,0,1);

    position: absolute;
    top:0;
    left: 0;
    right: 0;

    margin: auto;
    padding: 30px;
    padding-left: 25%;
    padding-right: 25%;
} 

编辑以使其垂直居中

.cdc {
    width: 100%;
    background: rgba(0,0,0,1);

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;

    margin: auto;
    padding: 30px;
    padding-left: 25%;
    padding-right: 25%;
}

---

由于

位置：绝对
与
顶部：0
和
底部：0
，您的div占据了页面的全部高度。这种组合将拉伸一个div以填充其容器的整个高度。你最好的办法是完全摆脱绝对定位

编辑：看到了JSFIDLE，将我的评论从顶层抄录到这里：

如果您的浏览器支持政策允许，我建议将flexbox用于垂直居中元素。否则，您可能需要求助于较小的CSS攻击，比如使用display:table；在父级上显示：表格单元格；垂直对齐：在孩子身上居中。
为什么需要绝对位置？如果你把它脱下来会怎么样？div应该在高度上拥抱内容，因此可能会有一些CSS在那里做一些事情。添加JSFIDLE可能会有所帮助。请在此处或之上添加工作代码段。好的，我已经添加了一个指向我的原始帖子的链接。您是否使用绝对定位使div垂直居中？如果您的浏览器支持政策允许，我建议您使用flexbox。否则，您可能需要求助于一些CSS小技巧，比如使用
display:table和
显示：表格单元格；垂直对齐：在子对象上居中
。我有
底部：0因为我希望DIV集中在页面上。我还在我的原始帖子中添加了一个指向JSFIDLE的链接。它在调整大小时起作用，但是div现在是原来的两倍大，所以内容结束了，下面仍然有相当多的黑色空间。是的，这是因为我忘了去掉底部的值，再次检查已编辑的css，这似乎解决了问题。
height:auto
只是将高度拉伸到100%。我在我的原始帖子中添加了一个JSFIDLE链接。
.cdc {
    width: 100%;
    background: rgba(0,0,0,1);

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;

    margin: auto;
    padding: 30px;
    padding-left: 25%;
    padding-right: 25%;
}