- This topic is empty.
-
AuthorPosts
-
July 29, 2013 at 1:25 am #144939maximebjParticipant
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 browsersI’m not pretending to replace the css-tricks method, I just want your opinions about this trick !
Thanks.
Max.July 29, 2013 at 9:44 am #144977Kitty GiraudelParticipantThat’s pretty much how I do sticky footers.
July 29, 2013 at 11:51 am #145061maximebjParticipantCool :)
thank you Hugo !
August 5, 2013 at 1:52 pm #145758John BasileParticipantHugo, 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
August 6, 2013 at 12:25 am #145784Kitty GiraudelParticipantAny code we might look at/tweak?
August 6, 2013 at 12:35 pm #145877John BasileParticipantHugo, 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!!
August 7, 2013 at 6:13 pm #146067PicnicTutorialsParticipantHere is a simpl(est) way I could make it http://www.websitecodetutorials.com/code/css/css3-sticky-footer.php
September 27, 2013 at 2:45 am #145862John BasileParticipantI 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">...n
--> ‹ › </div> <div class="navigation"> ‹ › <!-- SMALLER and Lower CAROUSEL w/ THUMBNAIL IMAGES --> <div class="carousel carousel-navigation">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> -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.