更改Div高度參數對尺寸沒有任何影響

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

您還需要設置html和body元素的高度。這是'CSS重置'（比如Eric Meyer's）通常會爲你做的事情。將此代碼附加到您的css文件：

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

Answer 2

您已設置.summeryBox高度的百分比是什麼..？ 你需要把它添加到你的CSS：

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

然後.summeryBox將相對於身體標記進行設置。

或者，您可以設置外部容器（.summeryBox）尺寸（以像素爲單位）。