html - how to make height of a div responsive? -


i want div if height of div exceeds 450px there scroller. able adding classname say, fixedscroll_450 div.

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

now div's content generated dynamically, , if exceeds 450px of height there scroller otherwise not. styling add in class

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

it working fine.. want give 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. height set 100% code. plz guide me..

use vh css unit height 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>


Comments

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -