html - How to apply scrolling according to height of a div? -
i facing alignment issue while height getting expanded.
scenario : have div tag need apply scrolling if height of div more fixed height.for fixed height scrolling not applicable.
please on this.
#configurator .content .white-box { background-color: white; border: 1px solid #cecece; /*overflow:scroll;*/ } #configurator .content .white-box-accessory { background-color: white; border: 1px solid #cecece; height: 50px; overflow: scroll; } #configurator .content .white-box-services { background-color: white; border: 1px solid #cecece; height: 50px; overflow: scroll; }
<div class="white-box"> <div> <p>accasory header </p> </div> <div class="white-box-accessory"> <p> accesory 1 <br>accesory 2 <br>accesory 3 <br>accesory 4 <br>accesory 5 <br>accesory 6 <br>accesory 7 <br>accesory 8 </p> </div> <div> <p>services header </p> </div> <div class="white-box-services"> <p> services 1 <br>services 2 <br>services 3 <br>services 4 <br>services 5 <br>services 6 <br>services 7 <br>services 8 </p> </div> </div>
first add css class divs want target. have used scroll
. add max-height
set fixed height, add overflow-y: auto
add scrolling when content more max-height
.
in snippet below have removed of services code demonstrate effect.
.scroll { max-height: 300px; overflow-y: auto; height: 50vh; }
<div class="white-box"> <div> <p>accasory header </p> </div> <div class="white-box-accessory scroll"> <p> accesory 1 <br>accesory 2 <br>accesory 3 <br>accesory 4 <br>accesory 5 <br>accesory 6 <br>accesory 7 <br>accesory 8 </p> </div> <div> <p>services header </p> </div> <div class="white-box-services scroll"> <p> services 1 <br>services 2 <br>services 3 <br>services 4 </p> </div> </div>
Comments
Post a Comment