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

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -