Question

我无法弄清楚为什么此容器的height（summaryBox）没有改变。我尝试过设置min-height，max-height并更改其他一些内容但没有任何效果。我希望容器的height占屏幕的20％，但它不起作用。其他一切都很好，我正在摸不着头脑。

CSS：

.summaryBox {
        border: 1px solid green ;
        width: 80%;
        margin: auto;
        overflow: hidden;
        min-height: 20%;
}

.summaryBox .img1 {
        width: 21%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .img2 {
        width: 21%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .sum1 {
        width: 21%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .sum2 {
        width: 21%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .arrowPanelLeft {
        float: left;
        width: 6%;
        color: white;
        text-align: center;
}

.summaryBox .arrowPanelRight {
        float: right;
        width: 6%;
        color: white;
        text-align: center;
}

HTML：

<div class="summaryBox">
    <div class="arrowPanelLeft">
            <p><</p>
    </div>
    <div class="img1">
        <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
    </div>
    <div class="sum1">
        <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
    </div>
    <div class="img2">
        <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
    </div>
    <div class="sum2">
        <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
    </div>
    <div class="arrowPanelRight">
            <p>></p>
    </div>
</div>

Answer 1

您已将.summeryBox身高设置为百分比..什么？你需要将它添加到你的css：

    html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    }

然后.summeryBox将相对于body标签设置。

或者，您可以设置外部容器（.summeryBox）尺寸，以像素为单位。

Answer 2

您还需要设置html和body元素的高度。这是＆＃39; CSS重置＆＃39; （例如Eric Meyer's）通常会为你做。将此代码附加到您的css文件：

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

更改Div高度参数对大小没有任何影响

2 个答案: