Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS To a better, simplet CSS sticky footer ?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #144939
    maximebj
    Participant

    Hi everyone,

    The CSS-Tricks sticky footer is simple and perfectly works.
    But I wondered :

    Is there another way ?
    Can we find a way without a :after and negative margin ?

    I’ve made some tests and found something.

    We are always assuming html and body are the exact same thing but there havent the same behaviour. HTMLis some kind of height of the document, and we always set it to 100% : screen height which I think it could be a bad idea (maybe I’m wrong)

    http://codepen.io/anon/pen/scLFx

    What do you think about this solution ?
    Do You have ideas ton improve it ?
    Can we all toghether think about it ?

    drawback of my solution :
    – it doesn’t work well when the content is larger than the screen
    – It works for modern browsers, but I’m not sure about the dinosaurus browsers

    I’m not pretending to replace the css-tricks method, I just want your opinions about this trick !

    Thanks.
    Max.

    #144977
    Kitty Giraudel
    Participant

    That’s pretty much how I do sticky footers.

    #145061
    maximebj
    Participant

    Cool :)

    thank you Hugo !

    #145758
    John Basile
    Participant

    Hugo, hey, thanks for the code! I’ve got a little bit of a complicated format with several ?php includes (header, nav, and footer) and can’t seem to get any method to force the footer to the bottom.

    I have my footer under a 3-column layout but within the left and right background outer columns. Any thoughts on what do I need to adjust if I’m trying to prevent my outer columns (background only, non-content edges) from extending past the footer?

    Going Crazy -Bsktbll7

    #145784
    Kitty Giraudel
    Participant

    Any code we might look at/tweak?

    #145877
    John Basile
    Participant

    Hugo, hey, thought I pasted it in here about 2 hours ago, had to try it a couple of times. But since, I went back over both html and css files and found I had a prior attempt that I left css body { padding: 188px;} which was conflicting on the same thing on the html css!! Working AWESOME, just wish I could get yesterday back, but, … :) Thanks!!

    #146067
    PicnicTutorials
    Participant
    #145862
    John Basile
    Participant

    I will strip or delete client identifiable stuff and long content lists. Here is the html, I can include css on the next post if you want.

    <head>
    meta….

    </head>

    <body>
    <div id=”fullContainer5″>
    <!– black brick outer edge –>
    <div id=”leftEDGEbox” >
    <section id=”leftEDGE” >
    </section>
    </div>

        <div id="body">
            <div id="header">
                <?php include('header.php'); ?> 
            </div>
    
    
            <!-- Navigational block to resolve HorizNav position and nav alignment issues -->
            <nav id="horizontalNAVleft">
            </nav>
                    <!--  FLOATING 3 COLUMN ACROSS WIDTH AND HEIGHT ...
                        Add MidLeft, Center, AND midRIGHT Sections ahead of horizontalNAV to resolve conflict
                        with center container that blocks or interferes with child & GrandChild nav elements.  -->  
            <div id="midRightBACK"> 
    
             <?php include('right_bar.php'); ?>
    
                    <div id="contentBACK">
                            <div id="content">
                              <center>              
                                <div class="wrapper">
                                    <h1>Welcome to ..!</h1>
    
                                    

    Your Source for the Best Restoration and Parts for....

    <div class="connected-carousels"> <!-- LARGE MAIN PHOTO SLIDER --> <div class="stage"> <div class="carousel carousel-stage">
    </div> <!-- Comment out included credit from JQ FILE- MARC did not photo our CARS

    ...n

    --> </div> <div class="navigation"> <!-- SMALLER and Lower CAROUSEL w/ THUMBNAIL IMAGES --> <div class="carousel carousel-navigation">
    </div> </div> </div> </div> <!-- END of CAROUSEL WRAPPER --> </center> <h2 align="center"> and repairs. Since 1980, enthusiasts have sought the expertise and craftsmanship only ..can provide. Our devoted and skilled staff have produced award winning vehicles at ..., is a recognized SAAC

    Representative and NADA advisory board member, providing appraisals and consultation.</h2>
    </div>

                            <div id="midLeftBACK">
    
                                <div id="midLeft">
                                </div>  
                            </div>  
                    </div>
            </div>
    
            <!-- Start horizontalNAV (menu.php) code after Midleft and center sections to resolve conflict with center container that blocks or interferes with child nav elements      -->
            <?php include('menu.php'); ?>                                   
    
        </div> <!-- closes BODY div which is big box to hold header, center 3 columns and footer -->
    
        <div id="farRIGHT">
        </div>
    
        <?php include('footer.php'); ?>
    
    </div> <!-- closes fullCONTAINER5 which is big box for all columns except stop -->
    
    
    <div id="stop"> <!-- An attempt at 2 functions.  A. To put an element that the 
                        outer columns supposedly stop at and B. to use a Red Line mark
                        to visualize what's going on  -->
        <table id="stop" >
          <td> 
                <hr />
          </td>
        </table>
     </div> 
    

    </body>
    </html>

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.