Avatar billede passiflora Juniormester
09. februar 2015 - 14:39 Der er 9 kommentarer og
1 løsning

Webside med fast top og bund 100% højde

Hej sad lige og rodede med at lave en side, hvor jeg gerne vil har fast top og bund, og så indhold fylder rest.
Den del funger sådan set fint. Men da jeg skal have scroll bar i højre side "forskubber" indholdet sig, og det forstår jeg godt, men hvordan jeg lettest undgår det, ved jeg ikke ...

Her lidt kode ...

</head>
<body>
<div id="head">
<div id="headind">Top</div>
</div>
<div id="foot">
<div id="footind">Bund</div>
</div>
<div id="content">
<div id="contentind">Indhold</div>
</div>
</body></html>


html { height:100%; max-height:100%; width: 100%; overflow: hidden; }

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0px; border:0;}

#content {height:100%; max-height:100%; background:gray;overflow:auto; margin-left: auto;  margin-right: auto;position:relative; z-index:3;}
#contentind{padding-left:00px;margin-bottom:50px;margin-top:100px;width:1000px; background:yellow; margin-left: auto;  margin-right: auto; z-index:7;}

#head {position:fixed; top:0; width:100%;  height:100px;  z-index:6;position:absolute;}
#headind{width:1000px;background:green;margin-left: auto;  margin-right: auto;height:100px;  top:0;z-index:6;}

#foot {position:fixed; width:100%; bottom:-1px; height:50px; z-index:5;position:absolute;}
#footind{width:1000px;background:green;margin-left: auto;  margin-right: auto; height:50px; top:0;}

Siden kan også ses på http://kigs.dk/test4.htm

Simpel løsning er at foretrække ...

Tak
Avatar billede jakobdo Ekspert
09. februar 2015 - 15:56 #1
Hvad med noget ala dette: http://jsfiddle.net/5hza26sd/
Avatar billede passiflora Juniormester
09. februar 2015 - 16:46 #2
Hmm jo ... jo'e bortset fra, at jeg ikke vil have fuld bredde, men kun fx. 1000px ....
Avatar billede AndersKT87 Novice
09. februar 2015 - 17:09 #3
Sæt <body style="width:1000px; margin-right:auto; margin-left:auto"> for at få en bredde på 1000px og centrering.
Avatar billede passiflora Juniormester
09. februar 2015 - 17:20 #4
Så skal jeg så bare have tilpasset placeringen af min top og bund.
Så vil scroll-baren komme til at stå umiddelbart til højre for siden, fra øverst til nederst ...
Avatar billede jakobdo Ekspert
09. februar 2015 - 19:31 #5
Prøv evt. at ret videre i jsfiddle så kan vi andre se hvad du har og evt. mangler.
Avatar billede passiflora Juniormester
10. februar 2015 - 08:59 #6
Tak, ville faktisk helst have haft scroll-baren helt ude til venstre. Men det kan jeg nok ikke få.
Burde jeg mon ikke kunne få den til kun at være på selve indholdsområdet ...?
Avatar billede jakobdo Ekspert
10. februar 2015 - 09:31 #7
Har du lavet en side vi kan se eller jsfiddle ?
Avatar billede passiflora Juniormester
11. februar 2015 - 20:54 #8
... hmm ...

Så centrerede jeg lige siden ... det jo sådan set fint ... men mine scroll-bar ...
Adressen er den samme ... http://kigs.dk/test4.htm

Kommet tættere på mål ... måske ...
Avatar billede passiflora Juniormester
21. september 2015 - 23:05 #9
Nogen der vil have del i point'ne ...
Avatar billede jakobdo Ekspert
22. september 2015 - 13:26 #10
Nej tak
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester