如何使div的高度響應？

Question

我想要一個div，如果該div的高度超過450px，將有滾動條。 我可以通過向div添加一個類名，例如fixedScroll_450來做到這一點。

<div class="fixedScroll_450" id="content"></div>

現在，div的內容將動態生成，如果高度超過450像素，將沒有滾動條。 現在為樣式添加類

.fixedScroll_450{
   min-height: 450px;
   max-height: 450px;
   width: 100%;
   margin: 0;
   overflow-y: auto;
 }

它工作正常。。但是我想用百分比值而不是像素表示高度。 但

 .fixedScroll_450{
   min-height: 30%;
   max-height: 30%;
   width: 100%;
   margin: 0;
   overflow-y: auto;
 }

不管用。 將此代碼設置為100％的高度。 請引導我..

Answer 1

可以通過在html和body標簽上設置高度來解決此問題

html,
body {
    height: 100%;
}

在CSS中，兩個元素沒有設置高度。 因此，通過使用min-height: 30% ，瀏覽器沒有計算出的高度。 添加一些內容后，html和body標簽的高度將隨內容本身而不是頁面的高度而增加。

另一方面，如果要確保它始終是屏幕高度的30％，則可以使用30vh （視口高度的30％）。 這些單元的進一步說明可以在這里找到： https : //developer.mozilla.org/en-US/docs/Web/CSS/length

Answer 2

使用vh css單位獲取高度，例如max-height: 30vh

 .fixedScroll_450{ max-height: 30vh; width: 100%; margin: 0; overflow-y: auto; } 

 <div class="fixedScroll_450" id="content">Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div> 

Answer 3

您只需要像這樣通過jquery設置高度。 通過CSS刪除最大高度並嘗試，我希望它能工作

$('#content').css('height':$(window).height()+'px')

Answer 4

如果不為父元素提供高度，則根據其內容將采用div標簽<div class="fixedScroll_450" id="content"></div>的高度。 您需要為此div標簽的父元素提供一定的固定高度，以便滾動條起作用。

Answer 5

這與方法有些不同。 如果您可以使用flexbox（請參見此處的瀏覽器支持），則可以這樣做：

 .outer-wrapper { position: absolute; top: 0; bottom: 0; left:0; right:0; display: flex; flex-direction: row; height: 30%; background-color: #64b92a; } .wrapper { display: flex; flex:1; flex-direction: column; height: 100%; overflow-y: scroll; } .fixedScroll_450{ height: 100%; } 

 <div class="outer-wrapper"> <div class="wrapper"> <div class="fixedScroll_450"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div>