|
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>Kod:
<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:
|
Du borde ändå ha id-properties på dina element, speciellt section, då det kan finnas flera section-element på en sida.
|
Citat:
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:
|
Som sagt, jag gjorde precis som dom sa med allt. Men fick det inte att fungera ändå. Troligen har jag något på sidan som gör att det inte fungerar.
|
|
Fick du ändra HTML strukturen då?
Jag antar det, annars går det väll att lösa med någon from av Javascript. Som räknar ut storleken av content jämfört med browserns fönster. |
Precis, jag fick ändra lite på html strukturen för att få det att fungera. inga drastiska saker faktiskt, mest bara lägga till en div runt <header> och <seaction>. :)
Helt rätt! Jag kunde ha gjort så.. tror jag.. Det jag gjorde med js var sen att jag kollade hur många pixlar som skiljde mellan hela body och webbläsarens storlek. Och sen applicerade jag de kvarvarande pixlarna på footer som en margin-top. Kommer inte ihåg varför jag inte körde på det, om det blev fel ibland osv. Men jag slutade upp med en lösning som bara satte footerns position som absolute och bottom:0;. Det gjorde att det blev en konstig scroll på något sätt. Vettefan. Oavsett så fungerar det bättre nu :) |
Nä det sket sig det här!
Alla dropdowns på sidan blev som fixed. Alltså - dom följde med när man scrollade. Boven var att man sätter height:100%; på html, body {} Hur som helst, jag följde istället jonas.o råd, och tog fram height() på #master och körde en bottom-margin på den baserat på hur många pixlar som återstod till bottom av window. Jag satte intervalen på 1ms. Någon som vet om detta kan orsaka problem? Tänker på webbläsarens minne eller något sånt? Är det sämre att ha 1ms istället för typ, 1sekund? |
Citat:
|
Det kan man ju tycka, men om hela content baseras på ajax och det finns "tabbar" på sidan, så blir content olika hög, vilket betyder att det skall vara olika margin-bottom beroende på vilken "tabb" du är på. Förstår du?
därför går det inte att appliceras bara en gång, för då stannar footern sen på samma ställe. Så säg att content är 100px hög, och man har då fått footern på rätt plats, sen hoppar du till en annan tabb, där content bara är 50px hög, ja då flyttas också footern upp 50px, vilket resluterar i att js koden var totalt onödig ;) |
Har du provat att köra wrappern min-height: 100%; och sen lägga footern efter wrappern med negativ top margin?
|
Antar det många missar är att sidans innehåll ändras utan att sidan uppdateras. Därför måste JS antingen gå på tidsintervall. Jag hade istället valt att kolla var 0,2 sekund eller 0,5s och sätta en animation så fungerar det nog bra och tar mycket mindre på webbläsaren och datorn. Även fast det förmodligen inte är något problem.
Förmodligen fungerar också P3N lösining, vilket i så fall är den bästa! |
Citat:
|
Precis som jonas säger, sidans innehåll ändras utan att sidan laddas om.
jag löste det dock genom att istället kolla höjden efter laddning, och nästa gång jag klickar någonstans i dokumentet, så kör den 500ggr var 1ms (= i 500ms). |
Prova att få till det med cssen. Är ju prio ett. Är det sen HELkört så kan man rädda med js. Men är ju absolut sista utvägen...
|
Jag har försökt och försökt med CSS. Med alla trix och fix som jag lärt mig från mina år med frontend så lyckades inte jag fixa det faktiskt.
Den dagen då vi tröttna på designen eller anser att det är dags att byta, så får vi ta med detta redan från början. |
| Alla tider är GMT +2. Klockan är nu 10:38. |
Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson