CSS: Behöver hjälp att få min footer att fastna på botten av sidan

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

CSS: Behöver hjälp att få min footer att fastna på botten av sidan

Hej. Jag har gått igenom dem här.
https://css-tricks.com/couple-takes-sticky-footer/
http://ryanfait.com/sticky-footer/
Och vet ni, nej den ska upp hela tiden och jag förstår inte vad jag gör fel. Jag har försökt själv i 2 dagar samt med dem här men det funkade inte. Jag vet att man kan använda position: fixed. Men jag vill gärna använda bottom: 0; position: absolute för då är den på botten av sidan hela tiden och följer ej med när man scrollar upp. Har ni någon tanke på hur man kan lösa detta för det var en klurig nöt.

CSS
https://gist.github.com/anonymous/6b99854717e760e91c3752b05a6...

HTML
https://gist.github.com/anonymous/0673fa8754a481e83174c2ca0d7...

Trädvy Permalänk
Medlem
Plats
Piteå
Registrerad
Okt 2004

om du ska köra footern så måste du köra wrappern i position absolute eller nå sånt om jag inte missminns mig helt galet, har för mig det var nånting liknande... Längesen jag pysslade med detta nu men det kanske tar dig ett steg i rätt riktning?

CPU: AMD Ryzen 1700x @ 3.8GHz || Mem: 16GB Corsair LPX 3000mhz || Mobo: Asus x370 Prime || GPU: EVGA Geforce GTX1070 SC || SSD: WD black 500GB m2 || OS: Linux Mint/Win 10 || Monitor: Dell 43" 4K P4317Q

Citera om du vill ha svar :)

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004

Utan att kolla på din kod, så verkar det som att du är ute efter position: fixed. Då fastnar elementet du vill ha fastklistrat, på den angivna positionen, oavsett hur mycket du skrollar.

Citera mig om du önskar ett snabbare svar.
Min blogg

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@edgren: Ja men alltså den följer ju med om man scrollar upp. Tänk dig att du scrollar ner på sidan och kommer till botten då ska du inte se footern förens du är helt på botten. Den ska inte följa med när man scrollar, förstår du hur jag menar?

@pellski87: Ska testa detta.

Trädvy Permalänk
Medlem
Plats
Piteå
Registrerad
Okt 2004

det kanske var relative du ska köra på wrappern sen absolute och bottom: 0 på footern kommer inte riktigt ihåg men prova det

CPU: AMD Ryzen 1700x @ 3.8GHz || Mem: 16GB Corsair LPX 3000mhz || Mobo: Asus x370 Prime || GPU: EVGA Geforce GTX1070 SC || SSD: WD black 500GB m2 || OS: Linux Mint/Win 10 || Monitor: Dell 43" 4K P4317Q

Citera om du vill ha svar :)

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@pellski87: Provade det och lite mer som jag själv kom på men nope den vägrar.

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004
Skrivet av Ikasera:

@edgren: Ja men alltså den följer ju med om man scrollar upp. Tänk dig att du scrollar ner på sidan och kommer till botten då ska du inte se footern förens du är helt på botten. Den ska inte följa med när man scrollar, förstår du hur jag menar?

Använd dig i sådana fall av följande CSS-snutt:

.element { left: 0; bottom: 0; padding: 30px 0; position: absolute; text-align: center; width: 100%; }

Den CSS-snutten lägger ditt element längst ner på webbsidan. För att inte gömma innehållet, kan du lägga till margin-bottom: 150px; eller hur stort mellanrum du nu vill ha, i body { ... }.

Citera mig om du önskar ett snabbare svar.
Min blogg

Trädvy Permalänk
Medlem
Plats
Piteå
Registrerad
Okt 2004
Skrivet av Ikasera:

@pellski87: Provade det och lite mer som jag själv kom på men nope den vägrar.

Hittade detta efter en snabb googling

A very simple approach which works great cross browser is this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bot... HTML <div id="container"> <div id="header"></div> <div id="body"></div> <div id="footer"></div> </div> CSS html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; }

CPU: AMD Ryzen 1700x @ 3.8GHz || Mem: 16GB Corsair LPX 3000mhz || Mobo: Asus x370 Prime || GPU: EVGA Geforce GTX1070 SC || SSD: WD black 500GB m2 || OS: Linux Mint/Win 10 || Monitor: Dell 43" 4K P4317Q

Citera om du vill ha svar :)

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@edgren: Footer fastnar i content när man scrollar ner ett problem jag inte heller vet hur man ska lösa och som jag har försökt lösa nu i 2 dagar. Varför kan inte bara css uppfinnare skapa typ stayonthebottomforever: yes; skulle vara så mycket enklare!

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004
Skrivet av Ikasera:

@edgren: Footer fastnar i content när man scrollar ner ett problem jag inte heller vet hur man ska lösa och som jag har försökt lösa nu i 2 dagar. Varför kan inte bara css uppfinnare skapa typ stayonthebottomforever: yes; skulle vara så mycket enklare!

Jag antar att du vill ha samma footer som vad jag har?

Citera mig om du önskar ett snabbare svar.
Min blogg

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@edgren: Precis den ska alltid ligga under content.

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004
Skrivet av Ikasera:

@edgren: Precis den ska alltid ligga under content.

Då behöver du ingen position över huvud taget. position: relative; är samma sak som ingen position alls. Lägg bara footer precis innan slut-taggen för body. Klart!

Citera mig om du önskar ett snabbare svar.
Min blogg

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@edgren: Jag tror inte att det där är en bra ide då allt måste vara mellan body och html Det ska funka med float eller vad man nu använder någon som kan kolla över koden och testa sig fram?

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004
Skrivet av Ikasera:

@edgren: Jag tror inte att det där är en bra ide då allt måste vara mellan body och html Det ska funka med float eller vad man nu använder någon som kan kolla över koden och testa sig fram?

Öh. Va? Float? Varför?

<html> <head> <title>...</title> </head> <body> <header class="logo"></header> <nav class="main"> Menyn... </nav> <main> Innehållet... </main> </footer> Footern... </footer> </body> </html>

Sådär ser en typisk webbsida ut från grunden. Den koden ger dig exakt det du är ute efter.

Citera mig om du önskar ett snabbare svar.
Min blogg

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@edgren: 'Ja men det är ju så jag har det!

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004
Skrivet av Ikasera:

@edgren: 'Ja men det är ju så jag har det!

Om din kod ser ut som min ovan och din footer inte kommer nedanför innehållet, så har du gjort något helt fel! Låt mig kolla igenom din kod lite snabbt, så skriver jag här igen.

Citera mig om du önskar ett snabbare svar.
Min blogg

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@edgren: Ja absolut jag postade den i första inlägget.

EDIT: Så här blir det när det är för mycket content. När det är lite typ ett ord då stannar den i botten.

http://i.imgur.com/P6byDo9.jpg

CSS

* {margin: 0; padding: 0;} html, body { font-family: Sans, Sans-serif, Verdana; color: black; background-color: white; min-height: 100%; } header { height: 80px; padding: 3px 0; background-color:#DC0707; border-bottom: white; border-bottom: 2px solid black; } .wrapper{ width: 800px; margin: 0 auto; } .wrapper h1 { color: white; margin-top: 10px; margin-left: 57px; font-family: Consolas; } .wrapper b { color: white; display: block; margin-top: 6px; font-family: Consolas; font-size: 14px; } .menu { float: right; margin-top: -73px; } .menu li {} .menu ul { list-style-type: none; text-align: center; height: 88px; } .menu ul li { display: inline; float: left; } .menu ul li a { display: block; margin-top: 20px; padding: 14px; width: 50px; } .menu ul li:hover{ background-color: black; height: 88px; } #content {font-size: 14px; width: 775px; margin-left: auto; margin-right: auto; overflow:auto; padding-bottom: 52px;} #content a:link{color: black;} #content a:visited{color: black;} #content a:hover{color: black;} #content a:active{color: black;} .footer{position: absolute; margin-top: -52px; bottom: 0; height: 52px; width: 100%; background-color:#DC0707; border-top: 2px solid black;} .footer p{margin-left: 30px; color: white; margin-top: 16px;} .fp {width: 800px; margin: 0 auto;} a:link {color: white; text-decoration: none;} a:visited {color: white; text-decoration: none;} a:hover {color: white; text-decoration: none;} a:active {color: white; text-decoration: none;} .allwindows {width: 100%;} .allwindows h3 { width: 100%; background-color: black; color: black; } #window1, #window2, #window3 { background-color: black; color: black; width: 15%; text-align: center; } .ed {width: 18%;} .clearfix{clear:both;}

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004

För mig funkade det hur bra som helst. Fick dock göra om en hel del. Mycket behöver ändras. Bland annat behöver du inte upprepa samma sak hela tiden (som med float i footern). Där behöver du bara ha ett enda element (till exempel en div) med allt i, och så texten efter varann. Hett tips: text-align: right;.

<!DOCTYPE HTML> <html> <head> <title>Förnman Efternamn</title> <meta charset="ISO-8859-1" /> <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTf-8" /> <style> html { margin : 0; padding : 0; } body { font-family: Sans, Sans-serif, Verdana; color: black; padding: 0; margin: 0; background-color: white; min-height: 100%; } header { background-color:#DC0707; border-bottom: white; border-bottom: 2px solid black; padding: 15px 0; } .wrapper { width: 800px; margin: 0 auto; } .wrapper > .logo { color: white; font-family: 'Consolas', sans-serif; display: inline-block; vertical-align: top; } .wrapper > .logo > a > .big { font-size: 28px; } nav { display: inline-block; vertical-align: top; } nav li {} nav ul { list-style-type: none; text-align: center; } nav ul li { display: inline; float: left; } nav ul li a { display: block; padding: 10px 14px; } nav ul li:hover{ background-color: black; } #content {min-height: 100%; font-size: 14px; width: 775px; margin-left: auto; margin-right: auto; overflow:auto; padding: 52px;} #content a:link{color: black;} #content a:visited{color: black;} #content a:hover{color: black;} #content a:active{color: black;} .footer{padding:30px 0;width: 100%; background-color:#DC0707; border-top: 2px solid black;} .footer p{margin-left: 30px; color: white;} .fp {width: 800px; margin: 0 auto;} a:link {color: white; text-decoration: none;} a:visited {color: white; text-decoration: none;} a:hover {color: white; text-decoration: none;} a:active {color: white; text-decoration: none;} .allwindows {width: 100%;} .allwindows h3 { width: 100%; background-color: black; color: black; } #window1, #window2, #window3 { background-color: black; color: black; width: 15%; text-align: center; } .clearfix{clear:both;} </style> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <meta charset="UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> </head> <body> <header> <div class="wrapper"> <div class="logo"> <a href="?site=asd" style="text-decoration: none;"> <div class="big">dsa</div> Screenwriter / Web developer / Gamer / Streamer </a> </div> <nav> <ul> <li><a href="?site=home">Home</a></li> <li><a href="?site=cv">Cv</a></li> <li><a href="?site=about">About</a></li> <li><a href="?site=contact">Contact</a></li> </ul> </nav> </div> </header> <div id="content"> <p>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br></p> </div> <div class="footer"> <div class="fp"> <p>© Site 2016. <a style="float: right; margin-right: 2%;" href="">Instagram</a> <a style="float: right; margin-right: 2%;" href="?site=twitch">Twitch</a> <a style="float: right; margin-right: 2%;" href="">Youtube</a> <a style="float: right; margin-right: 2%;" href="">Twitter</a> </p> </div> </div> <script type="text/javascript" id="cookieinfo" src="//cookieinfoscript.com/js/cookieinfo.min.js"> </script> </body> </html>

Citera mig om du önskar ett snabbare svar.
Min blogg

Trädvy Permalänk
Medlem
Registrerad
Maj 2014

Det enklaste om man inte är kung på css är att använda calc.

Sätt detta på content.

min-height: calc(100% - 80px - 2px - 50px - 2px); /* höjden är 100% av body minus header, headers border, och footer, och footers border */

då kommer footer exakt rätt.

Ta bort margins, paddings etc. Tänk på att border och padding ökar höjder. Vill man inte det så kan man kolla på box-sizing. Tänk även på att stänga taggar i rätt ordning (fel: <a...><b>...</a></b>).

Edit: bestäm dig också för antingen UTF-8 (rekommenderas) eller ISO-88591 (kan vara smidigare med äldre PHP och SQL)
Lycka till!

fullständig lösning för den som gillar copy paste: (jag tog bort designrelaterad kod)

<html> <head> <title>Förnman Efternamn</title> <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTf-8" /> <style> * {margin: 0; padding: 0;} html, body { font-family: Sans, Sans-serif, Verdana; color: black; background-color: white; min-height: 100%; } header { height: 80px; /* behövs eftersom header har floatat content*/ background-color:#DC0707; border-bottom: 2px solid black; } header h1 { color: white; margin-top: 10px; margin-left: 57px; font-family: Consolas; } header b { color: white; display: block; margin-top: 6px; font-family: Consolas; font-size: 14px; } .menu { float: right; } .menu ul { list-style-type: none; text-align: center; } .menu ul li { display: inline; float: left; height: 80px;/*sätt att li ska ha en viss höjd alltid, oavsett om det är hover eller ej*/ } .menu ul li a { display: block; margin-top: 20px; padding: 14px; width: 50px; } .menu ul li:hover{ background-color: black; /*att ändra höjden på något vid hover är ingen bra ide*/ } #content {font-size: 14px; width: 775px; margin-left: auto; margin-right: auto; overflow:auto; min-height: calc(100% - 80px - 2px - 50px - 2px); /* höjden är 100% minus header, headers border, och footer, och footers border */ } #content a:link{color: black;} #content a:visited{color: black;} #content a:hover{color: black;} #content a:active{color: black;} .footer{ bottom: 0; height: 50px; width: 100%; background-color:#DC0707; border-top: 2px solid black; } .footer p{margin-left: 30px; color: white; margin-top: 16px;} .fp {width: 800px; margin: 0 auto;} a:link {color: white; text-decoration: none;} a:visited {color: white; text-decoration: none;} a:hover {color: white; text-decoration: none;} a:active {color: white; text-decoration: none;} .allwindows {width: 100%;} .allwindows h3 { width: 100%; background-color: black; color: black; } #window1, #window2, #window3 { background-color: black; color: black; width: 15%; text-align: center; } .clearfix{clear:both;} </style> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <meta charset="UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> </head> <body> <header> <div class="wrapper"> <div style="float:left"> <h1><a style="text-decoration: none;">asdasd</a> </h1> <b><a style="text-decoration: none;">Screenwriter / Web developer / Gamer / Streamer</a></b> </div> <div class="menu"> <ul> <li><a href="?site=home">Home</a></li> <li><a href="?site=cv">Cv</a></li> <li><a href="?site=about">About</a></li> <li><a href="?site=contact">Contact</a></li> </ul> </div> </div> </header> <div id="content"> <p>asasasd</p> <div id="shit"></div> <button onclick="var text=''; for(var i=0; i<1000; i++){text += 'perfect ';}; document.getElementById('shit').innerHTML=text;">Add 1000 perfect</button> </div> <div class="footer"> <div class="fp"> <p>© Site 2016. <a style="float: right; margin-right: 2%;" href="">Instagram</a> <a style="float: right; margin-right: 2%;" href="?site=twitch">Twitch</a> <a style="float: right; margin-right: 2%;" href="">Youtube</a> <a style="float: right; margin-right: 2%;" href="">Twitter</a> </p> </div> </div> <script type="text/javascript" id="cookieinfo" src="//cookieinfoscript.com/js/cookieinfo.min.js"> </script> </body> </html>

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

Tack alla jag ska testa detta!