CODEWITHSUNDEEP
htmlcss
Corentin Branquet
Corentin Branquet

Reputation: 1576

Expand div to parent height

I've this code right now :

.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 a veritatis voluptatum sequi repellendus consequatur provident ratione velit.</p>
  </div>
</div>

I want that my <div class="text"></div> expand its height to 800px (container height).

I want to make it responsive. I try to put .text to 450px but it does not help me at all..

Thanks for your help !

Upvotes: 1

Views: 58

Answers (4)

tuuuuux
tuuuuux

Reputation: 1

You can set up the container to relative and the height of .text to 100% .container { width: 350px; height:600px; background-color: lightblue; position: relative; }

p {
    margin: 0;
    padding: 0;
}

.text {
    margin: 0;
    padding: 0;
    background-color: #ececec;
    position: relative;
    height: 100%;
}

Upvotes: 0

Danish Khan
Danish Khan

Reputation: 143

.container {
  width: 350px;
  height:200px;
  background-color: lightblue;
}

p {
  margin: 0;
  padding: 0;
}

.text {
  margin: 0;
  padding: 0;
  background-color: #ececec;
  height:100%
}
<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 a veritatis voluptatum sequi repellendus consequatur provident ratione velit.</p>
  </div>
</div>

Upvotes: 1

Dmitry Lobov
Dmitry Lobov

Reputation: 303

You have an image outside container, so you can streth it on all height. You should set height .text and img in percents, 80% and 20% for example. Set p tag inside .text heigh and max-height to 100%. As alternative, you can play with propeerties display: table-row and display : table-cell, but it can lead you to some problems with uncontrolable max-properties.

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can use Flexbox, and if you set flex: 1; on .text it will 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 a veritatis voluptatum sequi repellendus consequatur provident ratione velit.</p>
  </div>
</div>

Upvotes: 1

Related Questions