Div positionerings problem

8 svar · 1 260 visningar · startad av Asa 15 nov. 2014

AsaMedlem sedan dec. 20011 860 inlägg

Frågan15 nov. 2014 06:21#1

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/

Css
http://gruvsjo.se/div/all.css

voigtann1Medlem sedan juni 20019 519 inlägg

15 nov. 2014 07:56#2

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/

AsaMedlem sedan dec. 20011 860 inlägg

15 nov. 2014 08:23#3

Det skall vara fullhöjd. I chrome är det så men inte de andra. Får kika och hoppas den sidan hjälper.

JojoxxMedlem sedan juni 20004 308 inlägg

15 nov. 2014 08:28#4

<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>

AsaMedlem sedan dec. 20011 860 inlägg

15 nov. 2014 08:30#5

Jo men vill gå efter min kod och då är det ju annorlunda. Eller?

JojoxxMedlem sedan juni 20004 308 inlägg

15 nov. 2014 08:39#6

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.

AsaMedlem sedan dec. 20011 860 inlägg

15 nov. 2014 08:40#7

Okej, får kika på det då. Tackar! Återkommer om det en funkar som jag vill då.

JojoxxMedlem sedan juni 20004 308 inlägg

15 nov. 2014 08:53#8

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...
}

AsaMedlem sedan dec. 20011 860 inlägg

15 nov. 2014 08:54#9

Tackar, ska se hur det löser sig. Återkommer senare idag om jag stöter på problem.