Question 44221 in Html Question posted in
Some basic documentation can be found here.

100vh does not fill all the content placed in its tag – Html

I’m new to technology in general, which brings me some doubts, when I was studying a bit of CSS, I realized that when I add 100vh to my #container if it has a lot of content it ends up "jumping" out of its square and wanted to know why.

problem in pag html

section in css

in short because when I add the 100vh to my container it ends up not filling all the content

body {
  background-color: #878787;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#container {
  height: 100vh;
  margin: 60px 0 60px;
  background-color: #f8f8f8;
  border-radius: 10px;
  width: 50%;
}
<div id="container">
  <header>
    <h1>Glossário</h1>
  </header>

  <main>
    <h2>Termos de descrição</h2>
    <dl>
      <dt>The Description List</dt>
      <dd>Uma lista de pares de termos e descrições</dd>
      <dt>The Description Term </dt>
      <dd>Identifica um termo na lista de definição</dd>
      <dt>The Description Details</dt>
      <dd>Fornece detalhes ou uma definição mais completa do termo</dd>
      <dt>Lorem ipsum</dt>
      <dd>dolor sit amet consectetur adipisicing elit</dd><dt>The Description List</dt>
      <dd>Uma lista de pares de termos e descrições</dd>
      <dt>The Description Term </dt>
      <dd>Identifica um termo na lista de definição</dd>
      <dt>The Description Details</dt>
      <dd>Fornece detalhes ou uma definição mais completa do termo</dd>
      <dt>Lorem ipsum</dt>
      <dd>dolor sit amet consectetur adipisicing elit</dd><dt>The Description List</dt>
      <dd>Uma lista de pares de termos e descrições</dd>
      <dt>The Description Term </dt>
      <dd>Identifica um termo na lista de definição</dd>
      <dt>The Description Details</dt>
      <dd>Fornece detalhes ou uma definição mais completa do termo</dd>
      <dt>Lorem ipsum</dt>
      <dd>dolor sit amet consectetur adipisicing elit</dd>
    </dl>

  </main>
</div>
<footer>
  <span>Synxther</span>
</footer>
Tags:

2

Answers


  1. 0

    100vh equals to height of your viewport, i.e. browser window. I has nothing to do with your content. You should use 100% instead, or just remove height at all, since it is 100% by default

    Login or Signup to reply.
  2. 0

    You are giving your container a fixed height of 100vh so when the content inside of it is bigger, it will not fit. If what you want to do is make sure your container is atleast 100vh but grow as your content gets bigger, replace height: 100vh with min-height: 100vh.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search