11 svar · 454 visningar · startad av maqe
Jag har en div som fungerar som en container för 2 andr divvar jag vill att en utav divvarna ska få samma höjd som den yttre divven utan att jag ska sätta en höjd på den yttre divven. Kika här Jag vill att den rosa högra delen skall sträcka sig 100% av höjden på container divven http://www.maqe.se/div.htm
jag kan inte sätta 100% på den eftersom den yttre divven inte har någon storlek satt
<div style="border: 1px solid #000;width:200px;">
<div style="height:100%;">
<div style="float:left;width:50%;">
Content Content Content Content Content Content Content Content Content Content Content Content Content
</div>
<div style="height:100%;background-color:pink;">
text
</div>
</div>
</div>
Ser dock att detta inte funkar i mozilla.
Tips: Tabell ;)
Jag måste bygga siten utan tabeller :)
Liten fråga: Varför?
Enligt WAI standarden skall det tydligen inte vara några tabeller
Nej, undvik tabeller.
Verkar klurigt att hitta en lösning för IE. Det funkar i Firefox om man sätter display:table för den yttre div:en.
Men men, nån annan kanske kommer upp med nåt smartare förslag,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
#wrap {
border: 1px solid #000;
width:200px;
display:table
}
#left {
float:left;
width:50%;
}
#right {
float:right;
height:100%;
background-color:pink;
width:50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
<p>Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content.</p>
<p>Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content.</p>
</div>
<div id="right">
<p>text right</p>
</div>
</div>
</body>
</html>
Den enklaste lösninge kanske är att lägga en bakgrundsbild i #wrap, som är en pixel hög och 200 pixlar bred, där dom 100 pixlarna till höger är rosa.
Jo så kan man ju göra ... som sagt verkar klurigt att få till det där
Om du vet att den vänstra är längre kan du göra såhär:
#wrap {
border: 1px solid #000;
width:200px;
background-color:pink;
overflow: auto;
}
#left {
float: left;
width: 50%;
background: white;
}
:)
zcorpan skrev:
Om du vet att den vänstra är längre kan du göra såhär:
#wrap { border: 1px solid #000; width:200px; background-color:pink; overflow: auto; } #left { float: left; width: 50%; background: white; }:)
Ja, så kan man ju göra... :birp
Visste att det fanns en enklare lösning.