twitter-bootstrap - 调整高度以匹配内容的 DIV

Question

我目前正在使用 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%;
} 

感谢您的帮助。

编辑:JSFiddle link

Answer 1

它占据了整个高度，因为您使用的是绝对定位并且您将底部值设置为零

如果你确实需要绝对定位，你可以修改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%;
}