CSS: Page with Header, Main and Footer using Flex

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .


While exploring a website structure of header (incl. nav), main and footer where the header is fixed to top and footer to bottom of window, when using flexbox, I came across this implementation of it: From https://jsfiddle.net/RnBhH/2/
In this implementation the CSS has the following lines at the beginning:

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

When I was trying out the same approach in my test html file, I ignored the html part of the CSS and used only the body part. Somehow I had the impression that we can ignore the html element CSS if we apply the same CSS to the body. I was wrong!
If we modify https://jsfiddle.net/RnBhH/2/ CSS to remove html from above CSS code then a vertical scrollbar appears on the whole page including header and footer, if the content of the page overflows the vertical size of the window, and the footer then is not shown. Scrolling to the bottom shows the footer. At that point, the header is not shown as it has scrolled off the whole page. As the article element has “overflow-y: scroll;” an additional vertical scrollbar is shown for just the article content but that scrollbar is inactive.
Specifying html height as 100% results in vertical scrollbar not appearing for the entire page. The vertical scrollbar appears for the article content and is active. So now the header and footer both are visible even when one vertically scrolls the article content.
However, the header and footer grow in height when the window height grows even if the article height grows much faster than header or footer (8 times faster if I understood the CSS correctly).

Setting header and footer’s flex-basis to 10% and 5% (and removing the flex 1 specification) seems to give a better result with limited or no growth of height of header or footer when window height grows.

Setting flex-basis in pixels and flex-grow and flex-shrink to 0 seems to deliver fixed height header and footer and outside main content’s scrollbar (and so shown unless height is really tiny). Related CSS code:

main {
          overflow-y: scroll;
          width: 100%;
          text-align: center;
        }
        header {
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis: 60px;
        }
        footer {
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis: 30px;
        }

???? Not sure following article is accurate .. (btw it is dated 2004): Understanding the HTML versus BODY Element in CSS, http://phrogz.net/css/htmlvsbody.html

“In this example I have created a series of inflexible boxes, with both flex-grow and flex-shrink set to 0.” 

Comments

Post a Comment

Archive