Results 1 to 11 of 11
Thread: HTML Hell
-
2020-09-21, 03:55 AM (ISO 8601)
- Join Date
- Sep 2008
- Location
- UK
- Gender
HTML Hell
Hi folks, it's certainly been a while since I've been on these boards. Hoping someone here can help me with a website problem.
I need to design a website with a nav bar att the top, a footer at the bottom and a main section filling the rest of the page.
For the life of me, I cannot get the footer to stay on the bottom of the page without using "position: fixed" or sticky and when I do, stuff in the main section disappears behind it when I scroll down (if I resize my browser window).
I've tried messing around with height values for the nav, Main and footer sections but I don't think I'm doing it correctly.
I need to do this for an important IT course and would greatly appreciate any help.
-
2020-09-21, 04:46 AM (ISO 8601)
- Join Date
- May 2009
Re: HTML Hell
"height" attributes are notoriously tricky.
But when you say "stuff in the main section disappears behind it when I scroll down (if I resize my browser window)", I'm having a hard time visualising exactly what you mean.
If the footer has to be visible at the bottom of the page, then surely content in the main window is supposed to disappear behind it, isn't it? What exactly is the desired behaviour here, and what are you getting? A demo page would be helpful."None of us likes to be hated, none of us likes to be shunned. A natural result of these conditions is, that we consciously or unconsciously pay more attention to tuning our opinions to our neighbor’s pitch and preserving his approval than we do to examining the opinions searchingly and seeing to it that they are right and sound." - Mark Twain
-
2020-09-21, 05:06 AM (ISO 8601)
- Join Date
- Sep 2008
- Location
- UK
- Gender
-
2020-09-21, 05:52 AM (ISO 8601)
- Join Date
- Feb 2007
- Location
- Manchester, UK
- Gender
Re: HTML Hell
I may be misunderstanding something, but isn't this what IFRAME is for? You use one for the header, one for the footer, and one for the bit in the middle with the scrollbar.
-
2020-09-21, 07:12 AM (ISO 8601)
- Join Date
- Sep 2008
- Location
- UK
- Gender
-
2020-09-21, 07:25 AM (ISO 8601)
- Join Date
- Feb 2007
- Location
- Manchester, UK
- Gender
Re: HTML Hell
Heck, I'm no HTML expert so you'd probably have to look it up online to see what all the relevant parameters for an IFRAME are--I just know they exist and are designed to display multiple individual HTML documents on a single page. See here:
https://html.com/tags/iframe/
Although that little article suggests they're maybe a bit of an old-fashioned technique to be using! No idea what the fancy-schmancy HTML5 replacement is supposed to be.
-
2020-09-21, 07:29 AM (ISO 8601)
- Join Date
- Aug 2013
Re: HTML Hell
Are you doing this in like pure html?
Because I get the feeling CSS should be able to put stuff with more precision.
I tink the Iframe is used as a normal tag within eg <body> so <iframe></iframe> do delineate a separate part.
-
2020-09-21, 08:46 AM (ISO 8601)
- Join Date
- Sep 2008
- Location
- UK
- Gender
-
2020-09-21, 10:52 AM (ISO 8601)
- Join Date
- Jul 2004
- Location
- Freiburg, germany
- Gender
Re: HTML Hell
Prepared a quick and dirty PoC:
https://succubus.betatest.rocks
View the source with CTRL+U and have a look at the <style> tags (CSS basically). The HTML part is only three divs with content.
Long story short: Fill your header and footer with whatever you want, and adjust the max-height of the content accordingly. Also important is the "overflow-y: auto;", so that your content div doesn't stretch.
This is obviously a very basic implementation that doesn't scale to dynamic header/footer content, and with less content in the center div the footer will sit below the (now shrunk) content. if you don't want that just replace "max-height" in the content with "height". From your description it didn't sound as if you'd need a more robust implementation that does the scaling for you, but if I'm wrong on that end I can give it a shot.
-
2020-09-22, 12:35 PM (ISO 8601)
- Join Date
- Aug 2007
- Location
- Imagination Land
- Gender
Re: HTML Hell
-
2020-09-23, 05:53 AM (ISO 8601)
- Join Date
- Sep 2008
- Location
- UK
- Gender
Re: HTML Hell
Thanks for the help folks! I randomly stumbled onto a solution that seems to do the right thing:
Main {
Height: calc(100vh - footer height - nav bar height)
}
...with the footer and nav in px.
Next step, learning when to use align-content, justify-content, align-items and justify-items properly!