Avatar billede blach Nybegynder
25. september 2005 - 15:22 Der er 8 kommentarer

main1 og main 2 skal fylde 100%

Jeg har fundet denne kode på exp, men har brug for at main1 og main2 fylder 100% også (og ikke skubber til siden, men så siden altid fylder 100%)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
    "http://www.w3.org/TR/html401/strict.dtd">
<HTML>
<HEAD>
  <TITLE>
  </TITLE>
  <style type="text/css">
  html,body{height:100%;margin:0px;padding:0px;text-align:center;}
  #container{position:relative;height:100%;width:839px;margin:0px auto;text-align:left;}
  #top{position:absolute;height:290px;width:100%;background:yellow;z-index:1;}
  #main{height:100%;background:white;}
  #main1{width:222px;height:100px;background:white;float:left;border-right:solid 1px rgb(204,204,204);}
  #main2{width:537px;height:100px;background:white;float:left;}
  #spacer{height:290px;}
  #bottom{position:absolute;left:0px;bottom:0px;height:15px;width:100%;background:white;z-index:1;BORDER-TOP: rgb(204,204,204) 1px solid;}
  </style>
</head>
<BODY class="ukPool home">
  <div id="container">
    <div id="top">top</div>
    <div id="main">
      <div id="spacer"></div>
      <div id="main1">
      NYHEDER
      </div>
      <div id="main2">
      Tekst
      </div>
    </div>
    <div id="bottom">
      FOOTER
    </div>
  </div>
</body>
</html>
Avatar billede blach Nybegynder
25. september 2005 - 15:37 #1
-Måske ikke nødvendigt, vil bare gerve have main1 til at strække sig height:100% i main, så jeg kan have en farve på den.
Avatar billede bjoarn Nybegynder
25. september 2005 - 16:33 #2
Dit spørgsmål er mig lidt uklart. Er det 100% procent i højden eller bredden? Kan du ikke uddybe hvilke tags det drejer sig om og hvordan de skal ligge i forhold til hinanden?
Hvis det udelukkende handler om baggrundsfarven, så kan du jo istedet definerer den i #container og så have andre farver i de elementer der ikke skal have den baggrundsfarve.
Avatar billede blach Nybegynder
25. september 2005 - 16:46 #3
<div id="main1">
      NYHEDER
      </div>

-skal fylde 100% i højden.. Og ikke bare ved at indsætte height:100%, for så skubber den siden for langt.
Og grunden til at den skal fylde 100% i højden, er at dens background skal være grå, og så skal den fylde det hele...
Avatar billede bjoarn Nybegynder
25. september 2005 - 17:11 #4
Så vidt jeg kan se på koden er din #main1 afgrænset af #top foroven, #main2 til højre og #bottom forneden.
Hvis du angiver #container's baggrund til grå og giver #top, #main2 og #bottom(hvis de ikke allerede har) en anden farve og lader #main1 uden farve kan du skabe den ønskede effekt.
Man kan desværre ikke løse det med %, medmindre at #container har en fast højde (angivet i px, pt, em e.l.).
Det skal dog siges at det godt kan lade sig gøre hvis man bruger tabeller til at udforme side-layoutet, hvis man da ikke lader sig skræmme af puritisterne.
Avatar billede bjoarn Nybegynder
25. september 2005 - 17:16 #5
Uhhh... jeg glemte lige nogle detaljer. Det er ikke så nemt som så. Mit ovenstående løsning virker i nogle tilfælde. Nemlig når indholdet i #main2 altid fylder mere end det i #main1, samt at der ikke er andet white-space i #container-elementet.
En meget udførelig måde at lave layout i ren css, kan findes på:
http://positioniseverything.net/piefecta-rigid.html
Det ser gyseligt ud, men der er mange guldkorn i koden
Avatar billede blach Nybegynder
25. september 2005 - 18:18 #6
Hmm.. tror sku bare jeg smider en tabel ind i main1 som fylder 100% i height.
Avatar billede bjoarn Nybegynder
25. september 2005 - 18:41 #7
hmm... hvis du tænker på min kommentar:
"Det skal dog siges at det godt kan lade sig gøre hvis man bruger tabeller til at udforme side-layoutet"
Så nytter det ikke at sætte en tabel ind i #main1, der var meningen at hele siden var en tabel, sådan at main1 blev til en <td> som jo altid vil strække sig med hele højden.
Avatar billede roenving Novice
25. september 2005 - 21:41 #8
Måske kigge forbi her: http://www.eksperten.dk/spm/488278#rid4511606 ...
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