Question

我有一个带有居中框的bootstrap 3页面，其中包含内容。如果内容增长，则框保持静态，并且不会随着我的内容而增长，但引导容器会增长。我不知道为什么“盒子”没有扩大。我尝试了“position：relative”和“overflow：hidden”，但它不起作用我也试过“容器 - 流体” - 没有反应。

我的CSS样式表：

   html,
    body {
        height:100%;
        width:100%;
    }

    .container {
        height:100%;
        min-height:100%;
    }

    .row {
        height:100%;
        min-height:100%;
    }
.box {
    height:90%;
    min-height:90%;
    max-width:1100px;
    background-color:rgba(0,0,0,0.83);
    text-align:left;
    padding-left:5%;
    padding-right:5%;
    padding-top:1%;
    overflow:hidde;
    position: relative;
}

HTML：

<div class="container">
        <div class="row">
            <div class="box">
                <div class="col-xs-12">
                </div>
            </div>
        </div>
</div>

Answer 1

你已经硬编码了你的盒子的高度，这就是为什么它不会随着更多内容的增加而增长。你必须将height设置为auto。如果您希望盒子具有最小高度而不是存在太多内容，则只需使用额外的min-height: 100vh;

.box {
    height:auto;
    min-height: 100vh;
    /* etc.
}

见工作Fiddle

Answer 2

由于您使用的是bootstrap，请尝试这样做

WITH cte AS (
  SELECT ..... FROM .....
),
other_cte AS (
  SELECT ..... FROM .....
)
SELECT * 
FROM cte
INNER JOIN other_cte ON...

然后使高度像：

<div class="container">
    <div class="row">
        <div class="col-md-12 box">
            <div class="col-xs-12">
            </div>
        </div>
    </div>

Bootstrap 3 min-height div不会扩展

2 个答案: