Hej, Det här är ett vanligt, störigt problem. Mitt spontana råd är att inte göra någon av div:arna fasta. Försök istället ha höjden procentuelllt även på dem, och fixa grafiken så att det inte störs. Sen får du försöka göra yttersta div:en till typ 90% istället, och hoppas på att det ser bra ut på de flesta ställen... Låter som en vettig lösning, tyvärr är det väldigt petigt att de två divarna MÅSTE ha en exakt höjd mätt i antal pixlar. Är detta omöjligt att fixa till? Jo, jag ser nog principen för det du vill. Vad du skulle kunna göra är följande (om det inte är precis det du menar): Tack för hjälpen! Nu verkar det funka bra i både IE6 och IE7. Använde negativa z-index samt absolute positioning. Toppen! Hej!DIVar som fyller ut höjd och bredd
Jag har kört fast när det gäller att få DIVar att fylla ut höjden och bredden på en webbsida.
Hittade följande artikel och lyckades få en enskild DIV att fylla ut höjden på en sida.
http://www.communitymx.com/content/article.cfm?cid=BAD95
Problemet jag har är följande:
Jag har tre divar som ska ligga ovanpå varandra. Vi kallar dom top, middle och bottom. Alla ligger inuti en DIV som heter main. Top och Middle har fasta höjder 100 px vardera. Bottom ska fylla ut resten av sidan.
Problemet är att höjden nu alltid blir större än fönstrets höjd och scroll-listen visas till höger, oavsett webbläsarens storlek. Anledningen är att mains höjd är satt till 100%, vilket även bottom är för att fylla ut sidan. Top + middle + bottom är då alltid 200px högre än main eftersom bottoms höjd = mains höjd = fönstrets höjd.
Någon som vet hur man skulle kunna komma runt detta? Skulle alltså vilja att bottoms höjd är 100% minus de 200 pixlar som top och middle tar i anspråk. Är detta möjligt att åstadkomma på något sätt?
Stort tack på förhand / Christoffer
HTML-koden och CSSen bifogas nedan:
<body>
<div id="main">
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</div>
</body>
html,body{
height:100%;
width:100%;
margin:0px;
padding:0px;
}
#main{
height:100%;
}
#top{
height:100px;
background-color:lime;
}
#middle{
height:100px;
background-color:red;
}
#bottom{
height:100%;
background-color:blue;
}Sv: DIVar som fyller ut höjd och bredd
Sv:DIVar som fyller ut höjd och bredd
Skulle det kanske funka om man gjorde ett till lager med en div som fyllde upp hela sidan med (i detta fall) blå färg, och satte z-index -1 och position: absolute? Har hört att z-index inte funkar helt klockrent i alla webbläsare.Sv: DIVar som fyller ut höjd och bredd
1. Gör en yttre div som är 100% (eller lite mindre med tidigare resonemang).
2. Gör tre inre div:ar. Gör två av dem till fast höjd, men placera dem absolut på höjd 0 och höjd 100. Låt dem flyta "ovanpå".
3. Se till att innehållet inte börjar förrän efter 200 pixlar i den tredje, och låt den ta upp 100%.Sv:DIVar som fyller ut höjd och bredd
Men, problemet nu är firefox (både 1.5 och 2.0) - den verkar inte stödja negativa z-index - inget av det som har z-index negativt visas överhuvudtaget. Det funkar om man använder positiva z-index, men då måste jag ju sätta ett högre z-index för precis alla andra element på hela sajten som ska ligga "ovanpå" de element jag har lagt in nu.
Är det inte tanken att FireFox ska stödja CSS-standarden väl? Då borde väl z-index fungera med negativa värden tycker man?Sv: DIVar som fyller ut höjd och bredd
Först - din main tjänar som en container vilken ska hålla ihop hela layouten, den sätter du inte någon höjd på. På din top lägger du fasta pixlar i höjdled, liksom på din middle. Din bottom lägger du inte någon höjd på utan den ska vara relativ och anpassas efter innehållet. Jag förmodar att du vill ha det som du har angivit på grund av grafiken - eller har jag fel och att du är ute efter en fullwidth layout?
Jag ska ge dig ett alternativ och försöka att förklara på ett lättfattligt sätt.
Undvik z-index i huvudstrukturen så långt det går.
FF 2.0 läser visst av z-index (jag har det själv på min sajt) förutsatt att du skriver detta korrekt och ex med en text-indent på ex -9999.
work-arounds är i dagsläget mest brukbart som konditional comments. Jag använder dock ett starfloatcommando eftersom jag tycker att det passar mig bäst,
-------------------------------------------------------------
* {margin:0; padding:0;} <--- Starfloathtml
* html{margin:0; padding:0;} <----Starfloathtml
-------------------------------------------------------------
Denna är nödvändig eftersom IE inte läser av koderna från roten html utan endast från body. Lägger du då in detta kommando behöver du inte ange några negativa värden - din main kommer att lägga sig direkt uppe i marginalen av skärmfönstret. Därför stryker vi html från body.
body{background:#663300 url() repeat-y center top; text-align:center; color:#111;
font:11px/1.6em Verdana,arial,"Trebuchet MS",Sans-serif;}
------------------------------------------------------------------------------------------------
Läs gärna mer om divar, css och xhtml på http://kaxigt.com/resurs.php
samt hitta mer tips http://kaxigt.com/links.php
mvh/Lillan