How to make an element occupy the entire height of the div?

Asked

Viewed 405 times

-2

I have an element <aside>, and I want him to occupy all the height of <div> where it is inserted. However, I don’t know how to set the height relative to another element. How can I set the height of the element <aside> in relation to parent element properties, with CSS?

I’m using Materialize CSS to make the styling and adjustment grid.

GIFT

<body>
  <header>
    <!-- cabeçalho -->
  </header>

  <div class="row">
    <aside class="white black-text col s3">
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
    </aside>
    <div class="col s9">
      <!-- demais conteúdo -->
    </div>
  </div>
</body>

CSS

aside{
    padding: 2em;
    width: 25em;

    /* elemento "height" ocupa apenas a área padrão do elemento, e não 100% da altura da div, como queria */
    height: 100%;
}

Desired result:

aside ocupando o tamanho correto

Result obtained so far:

aside ocupando apenas uma parcela da página

html css html5 css3

  • uses bootstrap 4 olha ai q facil https://getbootstrap.com/docs/4.0/utilities/sizing/

  • 1

    You also need to think about the following: <div> is a container that has the size necessary to fit your content. So if you want the <aside> has the size of 100% of <div> you already have it, because the <div> adapts to the size of your <aside> . :D

  • 1

    But that being said, this part is layout, so you should probably use something like CSS Grid or Flex Box

1 answer

4


In your case, it seems that you do not want an element with 100% height of the parent element, but 100% height of the screen, in which case the best to use is:

min-height: 100vh;

It works as a percentage of View Height, so 100vh is 100% of View Height.

Browser other questions tagged html css html5 css3

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