Weblayout opsætning

Tags:    html css

Kære udviklere,

Jeg er igang med et nyt projekt, og kan af visse årsager ikke nævne hvad det går ud på. Det håber jeg at I kan forstå. Så jeg skal forklare mit problem så punktlig som muligt, så det er til at forstå.

Det er sådan at jeg har sat mit weblayout op på følgende måde: Link til Imgur. På de fleste af mine sider skal headeren være mindre, men på en enkelt side skal den være 400 pixels i højden. Min content div skal altid have samme højde, men indholdet skal kunne fylde mere en højden. Dvs. at både navigationen og headeren skal forblive på samme position som når du indlæser siden, imens at man i content delen skal kunne scrolle igennem indholdet. Selve hjemmesiden skal der ikke være scroll på, men kun i content div'en.

Jeg har forsøgt mig på at give både navigationen og headeren en fixed position, men kommer ud i problemer med content-div'en. På nuværende tidspunkt har jeg givet content div'en en fast højde, med scroll på overflow-y. Men jeg kommer ud i problemer med at det kun er noget af min content div's indhold man kan se. Resten bliver skjult bag ved content div'en.

Jeg ved at det ikke er meget at gå efter, men jeg håber at I kan forstå, og evt. kan give et godt råd med på vejen. Hvis der er nogen uddybende spørgsmål er jeg klar til at svare på dem.

På forhånd tak for hjælpen!

[EDIT] Har uploadet et nyt billede, hvor man bedre kan se hvad jeg mener. I dette eksempel har content div'en ingen scrollbar, selvom at det nederste resultat er ligeså højt som de andre. Imgur link her



Indlæg senest redigeret d. 17.08.2017 19:05 af Bruger #16025
1 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
[LØST] Jeg fik problemet løst, men ikke helt på den måde jeg gerne ville have det - altså udelukkende CSS løsning. Jeg har løst det med jQuery, hvor jeg giver min content div den højde der er tilsvarende (vinduets højde - (headerens ydre højde + 20)). Grunden til "+ 20" er fordi at jeg har margin mellem min header og indholdet.

Løsning i kode:
Fold kodeboks ind/udJScript kode 




Indlæg senest redigeret d. 17.08.2017 20:02 af Bruger #16025
t