CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Footers - Located at bottom of browser but become scrollable as content grows  (Read 420 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 519
  • Karma: +5/-0
    • GrumpyYoungMan
What you're missing is that the parent is still flex. As such simply showing/hiding (which really due to search issues should NEVER be done with display:none) isn't sufficient. See how mine sets width:100% and changes the flex? Yeah, that.
I have it kind of working now - just by adding flex-wrap?

Thank you Jason!

CSS:
Code: [Select]
html,
body {
    font: normal 1em/1.5 Helvetica;
    background: #000;
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    letter-spacing: 0.1em;
}

body {}

* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

header {
    border-bottom: 0.15em solid;
    display: flex;
    flex-wrap: wrap;
}

footer {
    border-top: 0.15em solid;
}

header,
footer {
    padding: 0.5em 0;
    background: #333;
    border-color: darkgreen;
}

header label {
    margin: 0.25em 0.5em;
}

header label:hover {
    color: #000;
    background: greenyellow;
    border-radius: 0.5em;
    cursor: pointer;
}

header nav {
    text-align: right;
    padding: 0.75em;
}

header nav ul {}

header nav li {
    display: inline-block;
}

header h1,
header nav {
    flex-grow: 1;
}

header h1 {
    padding: 0.25em 0.1em;
}

header nav li a,
header nav li span {
    padding: 0.5em 0.75em;
}

header nav li a {
    color: inherit;
    text-decoration: none;
}

header nav li a:hover {
    color: #000;
    background: greenyellow;
    border-radius: 0.25em;
}

header nav li span {
    color: #ccc;
}

main {
    flex: 1 0 auto;
    padding: 0.5em;
}

main p {
    padding: 0.5em;
}

footer section a {
    text-decoration: none;
    color: inherit;
}

footer section a:hover {
    color: greenyellow;
}

@media only screen and (max-width: 50em) {

    header nav {
        position:absolute;
        left:-100%;
        top:-999em;
        text-align:center;
        /*margin:0.75em 0 0.5em;*/
        padding: 1em;
        background:#444;
    }

    header #showMenu:checked ~ nav {
        position:static;
        width:100%;
        /* left/top auto ignored when static */
    }

    header #showMenu:checked ~ nav {
        display: block;
    }

    label[for="showMenu"]:after {
        content:"\2261";
        font-size:3em;
        line-height:1em;
    }

}

The only thing I notice now is that padding the header and width on the nav doesn't seem to work and the over on the menu icon seems to be bigger than I would have expected?
« Last Edit: 13 Dec 2020, 06:50:17 am by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 519
  • Karma: +5/-0
    • GrumpyYoungMan
I couldn’t have done it without your input Jason so thank you!!!

I forgot to post the HTML so I have merged the CSS and HTML into the one file:

Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
    <title>FlexBox Test</title>
    <style>

        html,
        body {
            font: normal 1em/1.5 Verdana;
            background: #222;
            color: #fff;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        header {
            display: flex;
        }

        header h1, header nav {
            flex: 1 0 auto;
        }

        header,
        footer {
            background: #333;
            padding: 0.5em 0.25em;
        }

        header {
            border-bottom: 0.2em solid deepskyblue;
            flex-wrap: wrap;
        }

        /*  header h1 { background: red;}
        header nav { background: blue;} */

        header label {
            display: none;
            font-weight: bold;
            font-size: 2em;
            background: red;
            /*padding: 0 0.25em;*/
        }

        header label:hover {
            color: #000;
            background: greenyellow;
        }

        header input {
            display:none;
        }

        footer {
            border-top: 0.2em solid deepskyblue;
        }

        footer a {
            color: inherit;
        }

        main {
            padding: 1em;
            flex: 1 0 auto;
        }

        nav {
            text-align: right;
            padding: 0.5em;
        }

        nav li {
            display: inline-block;
        }

        nav li a,
        nav li span {
            font-weight: bold;
            text-decoration: none;
            color: inherit;
            padding: 0.25em 0.5em;
        }

        nav li span {
            color: #888;
        }

        nav li a:hover {
            color: #000;
            background: greenyellow;
            border-radius: 0.25em;
        }

        @media only screen and (max-width: 60em) {

            body {}

            nav {
                display: none;
            }

            header label{
                display: block;
            }

            #showMenu:checked ~ nav {
                display: block;
                text-align: center;
                width: 100%;
            }

        }

    </style>
</head>
<body>

<header>

    <h1>myHeader</h1>

    <label for="showMenu">&equiv;</label>
        <input type="checkbox" id="showMenu">

    <nav>
        <ul>
            <li><a href="">Link #1</a></li>
            <li><span>Active</span></li>
            <li><a href="">Link #2</a></li>
        </ul>
    </nav>

</header>

<main>
    <section>
        myContent
    </section>
</main>

<footer>
    <section>
        &copy; 2020 myCopyright<br><a href="">myFooter</a>
    </section>
</footer>

</body>
</html>
« Last Edit: 13 Dec 2020, 08:17:57 am by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 519
  • Karma: +5/-0
    • GrumpyYoungMan
Here it is in a CodePen, I think its a cross between what Jason created and a few tweaks by myself, to remove the sticky header and footer...

What do you think?

Edit: oh it doesn’t work properly on my iPhone!! Think I should just give this up! Sorted I just had to break the flex... 🤪
« Last Edit: 13 Dec 2020, 02:02:47 pm by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

JS Kelly

  • Junior Member
  • *
  • Posts: 10
  • Karma: +3/-0
Edit: oh it doesn’t work properly on my iPhone!! Think I should just give this up! Sorted I just had to break the flex... 🤪

I had this problem on only a few of my pages -- after reading probably everything the Internet has to say everywhere about sticky footers (that was before I found CutCodeDown), I found that the simplest, cross-platform, cross-browser, cross-device, no-script (etc) way of solving the problem was adding a little more content to each page that had the problem.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 694
  • Karma: +128/-1
    • CutCodeDown -- Minimalist Semantic Markup
@GYM, Sorry I missed you posting code, but the problem is you didn't set:

Code: [Select]
header, footer {
  flex:0 0 auto;
}

main {
  flex:1 0 auto;
}

Telling the footer and header to not expand larger than their content, and the main to expand to whatever space is available if shorter than the viewport. As I mentioned previously it's likely not helping that you doubled-up on the properties for both HTML and BODY, the only thing that should be set on HTML is height:100%;
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

John_Betong

  • Full Member
  • ***
  • Posts: 156
  • Karma: +14/-1
    • The Fastest Joke Site On The Web
Don’t know where to post this so will leave it here until it is deleted or moved...


Best wishes Jason on your Birthday and don’t forget to treat yourself to something special.
Retired in the City of Angels where the weather suits my clothes

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 519
  • Karma: +5/-0
    • GrumpyYoungMan
Happy Birthday, Jason!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

 

SMF spam blocked by CleanTalk

Advertisement