Twitter Bootstrap: header/content/footer layout with an height of at least screen height?

user_13665723 0
Viewed 146

I thought this would work but it doesn't. What I am doing wrong?

html, body {
    min-height: 100vh;
}

header, footer {
  background-color: blue;
  height:100px
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<header></header>
<section class="container bg-danger h-100">
    <div class="row h-100">
        <div class="col-12 py-5 my-5 h-100">
            <ul class="main_menu list-unstyled">
                <li class="rounded mb-2 py-2"><a href="/">foo</a></li>
                <li class="rounded mb-2 py-2"><a href="/">bar</a></li>
                <li class="rounded mb-2 py-2"><a href="/">baz</a></li>
            </ul>
        </div>
    </div>
</section>
<footer></footer>
</body>
</html>

It looks like your post is mostly code; please add some more details.

css html
2 Answers
html, body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header, footer {
  background-color: blue;
  height: 100px;
}

.container {
  flex: 1 0 auto;
}

You need to write your css like this.

Admin1

Everything seems perfect! you just need to give the height of html/body a dynamic height as you are giving header and footer height of 100px which is equal to 200px so minus this height from the overall height. Example below:

<style>
    html, body {
       height: calc(100vh - 200px);
     }
            header, footer {
              background-color: blue;
              height:100px
            }
</style>
user_98489650
Related