WN - HTML struktur problem

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - HTML struktur problem (https://www.wn.se/forum/showthread.php?t=1057931)

HTML struktur problem

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

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

Löser det problemet

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? :)

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/

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

Citat:

Ursprungligen postat av jonssondesign (Inlägg 20469972)

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

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

Citat:

Ursprungligen postat av JesperA (Inlägg 20469973)

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.

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

Citat:

Ursprungligen postat av jonssondesign (Inlägg 20469990)

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.