HTML struktur problem

jonssondesign · 2013-05-15, 01:45

Jag besväras av ett problem som jag inte tycks kunna lösa. Jag har funnit en lösning, men den buggar.

Problemet:

Sidan består av 3 sektioner:
[-------------Header-------------]
[Content]
[-------------Footer-------------]

Problemet uppstår när Content är väldigt litet, och hela dokumentet blir mindre än webbläsaren. Det skapas då alltså ett stort tomrum under footer ner till webbläsarens nederkant.

Hur löser man detta tro? Jag kan tyvärr inte lägga till mer content!

Jag löste det tidgare genom att lägga position:absolute; och bottom:0px; på footer när <body> var mindre än webbläsaren. Iom att det finns ajax laddad kontent också, så måste jag köra en intervall som kollar om body är mindre än window.

Problemet som uppstår med denna lösningen är att det blir en scroller från header ner till contents nerderkant. Varför vet jag inte, och jag tycks inte hitta vad som orsakar problemet heller.

Om någon tros veta problemet, berätta gärna, och behöver du se hemsidan så skicka ett PM. Sidan är fortfarande väldigt hemlig, därför vill jag gärna inte dela ut länken.

Mvh,
Fredrik

allstars · 2013-05-15, 09:24

html,body{min-height:99.99%;padding:0;margin:0}
#content {padding-bottom: @footer-height;}

Löser det problemet

jonssondesign · 2013-05-15, 09:58

Tack Allstars, men antingen gör jag fel eller så fungerar det inte riktigt som tänkt.

Min html struktur ser ut såhär:

Kod:

<body>
     <header></header>
     <section></section>
     <footer></footer>
</body>

Alltså, inte som traditionellt:

Kod:

<body>
     <div class="wrapper"></div>
     <div class="footer"></div>
</body>

Jag la "min-height:99.99%; padding:0; margin:0" på html, body {},
och footerns höjd på section {}, men som sagt, det fungerade inte som förväntat. Det blev bara ett tomrum mellan section och footer på en höjd lika hög som footer. That's it.

Några andra smarta idéer, eller vet du kanske vad jag gör för fel?

Linuus · 2013-05-15, 10:54

Detta är ett väldigt vanligt bekymmer. Googla "css sticky footer" så får du fram en massa lösningar.

T.ex:
http://www.cssstickyfooter.com/
http://ryanfait.com/resources/footer...ottom-of-page/

jonssondesign · 2013-05-15, 11:06

Tack linus för försöket, men sticky footer förlitar sig på en html struktur beståendes av två delar (antar jag?). Likt den struktur som jag beskrev som "traditionell". Jag har som sagt inte så.

Jag har testat att göra precis som sticky footer och applicerat allt som skulle appliceras på #wrapper på section elementet istället, men nada..

JesperA · 2013-05-15, 11:15

Citat:

Ursprungligen postat av jonssondesign

Jag har testat att göra precis som sticky footer och applicerat allt som skulle appliceras på #wrapper på section elementet istället, men nada..

Resten då?

jonssondesign · 2013-05-15, 13:20

Citat:

Ursprungligen postat av JesperA

Resten då?

Jag menade att jag gjorde precis som dom sa, men istället för att sätta viss css på #wrapper satte jag det på section istället.

Har även testat att linda in <header och <section i en <div id="wrapper"> och gjorde precis som dom sa, men fortfarande inget.

JesperA · 2013-05-15, 14:18

Citat:

Ursprungligen postat av jonssondesign

Jag menade att jag gjorde precis som dom sa, men istället för att sätta viss css på #wrapper satte jag det på section istället.

Ja jag vet vad du menade, med resten menade jag givetvis resten...alltså footern, "main" osv som i deras exempel.

allstars · 2013-05-15, 11:22

Du borde ändå ha id-properties på dina element, speciellt section, då det kan finnas flera section-element på en sida.

jonssondesign · 2013-05-15, 14:06

Ärsch, jag körde en fuling och satte en min-height på det dynamiska elementet som förstörde min footer.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

HTML struktur problem