8 svar · 1 257 visningar · startad av Asa
Hur får jag min footer div längst ner och under innehållet på sidan jämt hur lite, mycket text det än finns på sidan? Har suttit i timmar nu och har säkert stirrat mig blind men får inte till detta. Har sökt på hur andra gör men inget funkar. Irriterande :( Snälla HJÄLP
Sidan
http://gruvsjo.se/div/
Hur vill du att resultatet skall vara? skall din container vara full höjd av sidan? Om det är så så behöver du ändra om din markup lite kolla in: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
Det skall vara fullhöjd. I chrome är det så men inte de andra. Får kika och hoppas den sidan hjälper.
<body>
<style type="text/css">
body {
margin-bottom:100px;
}
#footer {
position:fixed;
background-color:white;
bottom:0px;
left:0px;
width:100%;
height:100px;
text-align:center;
}
</style>
...Lorem ipsum content...
<div id="footer">My footer</div>
</body>
Jo men vill gå efter min kod och då är det ju annorlunda. Eller?
Jao, sorry. Slarvade att läsa. Det går säkert snabbare för dig att hitta i den gigantiska css'en, men generellt så börja med att sätta:
html,body { height:100%; margin:0px; }
för att nå botten om innehållet på sidan är mindre. Sedan sätt content-diven som innehåller menyner och innehåll till:
{ height:100%; minheight: 600px; }
600px får du justera, detta för att om browserfönstret är för litet (ej i fullskärm, på mobil, surfplatta e.dyl) så räcker inte 100%, så då vill vi att den diven aldrig ska kunna bli mindre än ex 600px.
Okej, får kika på det då. Tackar! Återkommer om det en funkar som jag vill då.
Kollade lite mer på CSS'en. Den är inte uppbyggd som jag hade tänkt från början. Men dessa ändringar åstakommer vad du vill:
/* Bortkommenterade rader skall alltså tas bort från din css, resten lägger du till för #wrapper, #footer */
#wrapper {
/* min-height:100%; */
height:100%;
... resten av din existerande css för #wrapper...
}
#footer {
/* float: left; */
position:fixed;
bottom:0px;
... resten av din existerande css för #footer...
}
Tackar, ska se hur det löser sig. Återkommer senare idag om jag stöter på problem.