0

I am the furthest from a designer and as such look to others for visual design. I have made purchase of a template where the designer used a min-height: 1000px attribute on the main container to ensure that the background colour always stretched to the bottom.

I am trying to correct this and as such came across the following question; Make a div fill the height of the remaining screen space - Which clearly identifies the use of the new(ish) css3 flex attributes. However it appears as though perhaps my current structure won't allow for its correct use? or am I approaching it incorrectly?

CSS:

body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans',Helvetica, Arial, sans-serif;
  color: #666666;
  -webkit-font-smoothing: antialiased;
  /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  font-size-adjust: 100%;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.475;
  background-color: #FFF; }

#main {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  background: #e8e8e8; }

#content_wrapper {
  position: relative;
  display: block;
  -webkit-flex: 1;
  flex: 1;
  left: 0px;
  margin-left: 230px; }

HTML Structure:

<body>
    <header>
        <!-- Header Content Here - This is sticky -->
    </header>
    <div id="main">
       <aside id="sidebar_left" class="affix"><!-- Sidebar Content Here - This is sticky --></aside>
       <section id="content_wrapper"><!-- Webpage Content Here - This can scroll when necessary. --></section>
    </div>
</body>

On pages with appropriate amounts of content, there is nothing wrong with what is seen above. It works the same as the authors original min-height: 1000px solution did, however on short content pages (such as 404 Error etc) the content fills approx 1/3 - 1/2 of the page before stopping.

Flex failing to fill in the gaps!

  • I do not have a footer, nor do I plan on implimenting one. (In case it gets asked later)
  • I have tried to use height: 100% on the html and body tags to no avail
  • I previously attempted to use height:100vh but realized that it would also add height for my header region as it exists within the viewport itself.

How should I be approaching this issue? Is Flex the appropriate resolution here?

Community
  • 1
  • 1
Tarquin
  • 482
  • 2
  • 6
  • 21

2 Answers2

2
html {
  height: 100%;           /* Fill all the window */
}
body {
  min-height: 100%;       /* At least fill all <html> */
  display: flex;          /* Magic begins */
  flex-direction: column; /* Column layout */
}
#main {
  flex-grow: 1;           /* Grow to fill available space */
}


html {
  height: 100%;           /* Fill all the window */
}
body {
  min-height: 100%;       /* At least fill all <html> */
  display: flex;          /* Magic begins */
  flex-direction: column; /* Column layout */
  margin: 0;
  padding: 0;
}
#main {
  flex-grow: 1;           /* Grow to fill available space */
  display: flex;
  background: #e8e8e8;
}
#content_wrapper {
  background: yellow;
  flex-grow: 1;
}
<header>
  Header
</header>
<div id="main">
  <aside id="sidebar_left">Aside</aside>
  <section id="content_wrapper">Content</section>
</div>
Oriol
  • 274,082
  • 63
  • 437
  • 513
1

In this particular case, flex didnt seem to inherit the correct values for height: 100% and min-height: 100% - so I tried to use some calc() functions that I found in another question (unfortunatly I lost the link as I was doing the research on another computer)

Please find below my working solution for this somewhat unique issue. I truely hope it helps someone else;

#content_wrapper {
  position: relative;
  display: block;
  min-height: calc(100vh - 60px);
  left: 0px;
  margin-left: 230px; }

Instead of using flex, I mixed vh (vertical height) and css calc() together to remove the value of my small header bar and set the remaining value as my minimum height instead of trying to fill empty space (Tackle the problem from the reverse direction)

While I am still open to suggestions on more relevant or improved code, this code is working perfectly to the requirements of my original post.

Tarquin
  • 482
  • 2
  • 6
  • 21