CODEWITHSUNDEEP
htmlcss
Matt Hough
Matt Hough

Reputation: 1101

Make content container div stretch when content is small/empty

I am currently working on a website where sometimes (for instance when the loading square comes up - like image below) the main content div is too small to fill the entire page with the footer/header.

I would like the main content that is in between the header and footer to stretch when the content div is too small, so that it fills the entire screen, while keeping the footer and header in view.

I have tried many different ways to do this, but all to no avail so far. The image below illustrates my problem.

The HTML layout looks like this:

<body>
  <div class="nav-container"></div>
  <div class="main-container"></div>
  <footer></footer>
</body>

page where full screen not filled

Upvotes: 1

Views: 1073

Answers (1)

Hamza Ishak
Hamza Ishak

Reputation: 360

If you are familiar with flexbox, this would do the trick:

<body>
  <header></header>
  <div class="main-container"> Main content </div>
  <footer></footer>
</body> 

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header, footer {
  flex: none;
}

.main-container {
  flex: auto;
}

Upvotes: 1

Related Questions