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

How to force a block to take all height of remaining screen – Html

Look, i i have a structure like that in my HTML:

<body>
    <div class="wrapper">
        <header class="header">
            <div class="container">
                ХЕДЕР
            </div>
        </header>
        <div class="content">
            <div class="container">
                <section class="первая секция контента">
                    ПЕРВАЯ СЕКЦИЯ КОНТЕНТА
                </section>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                ФУТЕР
            </div>
        </footer>   
    </div>
</body>

I made my content part to take all the remaining screen between header and footer like that:

.container{
    max-width: 1170px;
    padding: 0px 15px;
    margin: 0px auto;
    min-height: 100%;
}

.wrapper{
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.content{
    flex: 1 1 auto;
}

enter image description here

As u see, container is in my content block, but when i set min-height: ‘100%’, it does not takes 100% of my content part, why that happens and how to make it using min-height, not using flex?
enter image description here

I mean, i want my container to take all the space by the end of screen, pushing footer down.

Tags:

2

Answers


  1. 0

    I found that the issue was that you used "min-height: 100vh" on the wrapper which gives it an undefined height because it can be infinitely above that.

    Try using "height: 100vh" instead that worked for me.

    But I do not recommend this method as it overflows outside the wrapper because the "content" will have the same height as the wrapper itself, not considering the header and footer that are also in the wrapper, and this will cause the header and footer to overflow because there is no space left for them.

    So I think your best option is to stick with the flex box as it was made for this kind of stuff.

    Login or Signup to reply.
  2. 0

    1- min-height: 100vh; doesn’t work ( at least in my experience it doesn’t work)
    So use height: 100vh; Yet, it isn’t the optimal approach due to a possible overflow of the "content". Or use also ( as I used in this example ) height: 100%; and margin: 0;.

    2-But I would recommend using flex. You will use it much more and better learn it.
    I would recommend reading this article which explains the solution to your exact problem using flex : The article

    Here is how I would solve your problem using flex:

    <!DOCTYPE html>
<html>
  <head>
    <style>
        html, body{
            height: 100%;
            margin: 0;
        }
        .wrapper{
            display: flex;
            flex-flow: column;
            height: 100%;
        }
        .wrapper .header{
            flex: 0 1 auto;
            background: #7e8aa0;
        }
        .wrapper .content{
            flex: 1 1 auto;
            background: #dbdfe7;
        }
        .wrapper .footer {
            flex: 0 1 100px;
            background: #7e8aa0;
        }
    </style>
  </head>
  <body>
      <div class="wrapper">
          <header class="header">
              <div class="container">
                  ХЕДЕР
              </div>
          </header>
          <div class="content">
              <div class="container">
                  <section class="первая секция контента">
                      ПЕРВАЯ СЕКЦИЯ КОНТЕНТА
                  </section>
              </div>
          </div>
          <footer class="footer">
              <div class="container">
                  ФУТЕР
              </div>
          </footer>   
      </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search