How to make a div of equal height to the div container? (container larger than viewport)

Asked

Viewed 228 times

1

Since I don’t want to define the height of the container div, because I want it to increase dynamically according to the content?

<div class="conteiner">
  <div class="esquerda">
   <!--Esta div não terá conteúdo e seguira a altura da div conteiner(maior que o viewport).-->
   </div>
 <div class="conteúdo">
 <p>Aqui vai o conteúdo. Esta div não terá altura fixa.</p>
 </div>
  <div class="direita">
   <!--Esta div não terá conteúdo e seguira a altura da div conteiner (maior que o viewport).-->
  </div>
</div>
html css

  • The mentioned div has no internal content. Only the container div has.

  • The aforementioned div has no internal content. Only the container div has What I put in the contents div increases the size of the container div, I would just like to div them . left and . right follow this. All the answers I found searching talk about increasing up to 100% of the viewport.

1 answer

0


Add the following property to your class .conteiner:

.conteiner {position: relative}

For the Divs that will expand according to the content (left and right):

.expandir {
    position: absolute;
    height: 100%;
    top:0;
    width:20px;
    background: yellow; 
}
.esquerda {left:0}
.direita {right:0}

And to center the div .conteudo:

.conteudo {margin:0 20px}

See example working on Jsfiddle.

  • 1

    Thanks. I got it here using the css-table technique described in this link. It had already worked, but I’m using Dreamweaver and for some reason it didn’t display the result correctly, I had looked at the design tab. I tested in the browser and is ok.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.