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

Html – How to implement a vertically stretchable fullscreen layout?

I’m trying to create a full-screen layout in which the content will adjust to the size of the footer.

body {
  margin: 0;
  padding: 0;
}

.layout {
  height: 100vh;
  
  display: flex;
  flex-direction: column;

  background-color: yellow;
}

.layout__content {
  height: 100%;
  
  align-self: stretch;
  
  background-color: blue;
}

.content {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: green;
}

.content__text {
  background-color: white;
}

.footer {
  height: 20vh;
  
  background-color: red;
}
<div class='layout'>
  <main class='layout__content'>
    <div class='content'>
      <text class='content__text'>Here be dragons</text>
    </div>
  </main>
  <footer class='footer' />
</div>

As you can see, if you change the value of height in .footer, then the content will fill all the space remaining from the footer. Everything works as intended.

Now I’m trying to make another layout. If the total height of the content and footer does not exceed 100vh, this display is similar to what was previously. But if it surpasses due to the content height, then a scroll should appear.

body {
  margin: 0;
  padding: 0;
}

.layout {
  min-height: 100vh;
  
  display: flex;
  flex-direction: column;

  background-color: yellow;
}

.layout__content {
  height: 100%;
  
  align-self: stretch;
  
  background-color: blue;
}

.content {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: green;
}

.content__text {
  height: 150vh;
  
  background-color: white;
}

.footer {
  height: 20vh;
  
  background-color: red;
}
<div class='layout'>
  <main class='layout__content'>
    <div class='content'>
      <text class='content__text'>Here be dragons</text>
    </div>
  </main>
  <footer class='footer' />
</div>

In the example, the text was 150vh long. But the problem is if this value will be removed, the content will collapse.

body {
  margin: 0;
  padding: 0;
}

.layout {
  min-height: 100vh;
  
  display: flex;
  flex-direction: column;

  background-color: yellow;
}

.layout__content {
  height: 100%;
  
  align-self: stretch;
  
  background-color: blue;
}

.content {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: green;
}

.content__text {
  background-color: white;
}

.footer {
  height: 20vh;
  
  background-color: red;
}
<div class='layout'>
  <main class='layout__content'>
    <div class='content'>
      <text class='content__text'>Here be dragons</text>
    </div>
  </main>
  <footer class='footer' />
</div>

Notes:

  1. I want to change attributes only of layout and layout__content.
  2. footer may have any height, so it is impossible to just hardcode height, min-height, max-height etc in the other elements. In the example it was hardcoded to 20vh, but it is only in the example.

I’ve already tried the following things:

  • layout – height: 1px;
  • layout-content – min-height: inherit;
  • layout-content – min-height: 100%;

So, any ideas?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I have solved this with double-dimensional flex-grow:

    Content content__text is short: 

    body {
    margin: 0;
    padding: 0;
}

.layout {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background-color: yellow;
}

.layout__content {
    flex-grow: 1;

    display: flex;

    background-color: blue;
}

.layout__content-wrapper {
    flex-grow: 1;
}

.content {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: green;
}

.content__text {
    background-color: white;
}

.footer {
    flex-grow: 0;
    height: 20vh;

    background-color: red;
}
    <div class='layout'>
    <main class='layout__content'>
        <div class="layout__content-wrapper">
            <div class='content'>
                <text class='content__text'>Here be dragons</text>
            </div>
        </div>
    </main>
    <footer class='footer'/>
</div>

    Same code, but content__text is long: 

    body {
    margin: 0;
    padding: 0;
}

.layout {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background-color: yellow;
}

.layout__content {
    flex-grow: 1;

    display: flex;

    background-color: blue;
}

.layout__content-wrapper {
    flex-grow: 1;
}

.content {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: green;
}

.content__text {
    /* Demonstration */
    height: 200vh;
    
    background-color: white;
}

.footer {
    flex-grow: 0;
    height: 20vh;

    background-color: red;
}
    <div class='layout'>
    <main class='layout__content'>
        <div class="layout__content-wrapper">
            <div class='content'>
                <text class='content__text'>Here be dragons</text>
            </div>
        </div>
    </main>
    <footer class='footer'/>
</div>


  2. 0 
    
.footer {
        /* height: 20vh; */
        min-height: 10vh;
        max-height: 20vh;
        flex-grow: 1;
        background-color: red;
      }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search