Subho Subho - 6 months ago 11
CSS Question

how to make height of a div responsive?

I want a div where if the height of that div exceeds 450px there will be scroller. I am able to do that by adding a classname say, fixedScroll_450 to the div.

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


Now the div's content will be generated dynamically, and if it exceeds 450px of height there will be scroller otherwise not.
Now for the styling I add in the class

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


it is working fine.. But i want to give the height in percentage value not in pixel. But

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


is not working. the height set with 100% with this code. plz guide me..

Answer

Use vh css unit for height like 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>