html - Expand div to parent height -


i've code right :

.container {    width: 350px;    height:600px;    background-color: lightblue;  }    p {    margin: 0;    padding: 0;  }    .text {    margin: 0;    padding: 0;    background-color: #ececec;  }
<div class="container">    <img src="http://placehold.it/350x150" />    <div class="text">      <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. quasi accusantium, excepturi hic ea dolor doloremque optio minus laboriosam suscipit qui atque veritatis voluptatum sequi repellendus consequatur provident ratione velit.</p>    </div>  </div>

i want <div class="text"></div> expand height 800px (container height).

i want make responsive. try put .text 450px not me @ all..

thanks !

you can use flexbox, , if set flex: 1; on .text take free space of .container

.container {    width: 350px;    height:600px;    background-color: lightblue;    display: flex;    flex-direction: column;  }    p {    margin: 0;    padding: 0;  }    .text {    margin: 0;    padding: 0;    background-color: #ececec;    flex: 1;  }
<div class="container">    <img src="http://placehold.it/350x150" />    <div class="text">      <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. quasi accusantium, excepturi hic ea dolor doloremque optio minus laboriosam suscipit qui atque veritatis voluptatum sequi repellendus consequatur provident ratione velit.</p>    </div>  </div>


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -