CSS-åroblem 100 % height i cell...

5 svar · 591 visningar · startad av Method 23 nov. 2008

MethodMedlem sedan apr. 2001357 inlägg

Frågan23 nov. 2008 18:07#1

Jag håller på med en hemsida där jag stöter på ett problem (kolla på bilden).

"boxarna" ligger i en tabell med flera celler och då vill jag att "boxarna" ska fylla ut 100% på höjden precis så som dom gör på bredden. Hur löser man det?

#content_box
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	text-align: left;
	width: 100%;
	height:100%;	
	background-color:#FFFFFF;
	}

<td colspan="2" width="50%"><div id="content_box">
          <!--- box border -->
          <div id="lb">
            <div id="rb">
              <div id="bb">
                <div id="blc">
                  <div id="brc">
                    <div id="tb">
                      <div id="tlc">
                        <div id="trc">
                          <div id="content">
                            <h1>fdffdfdfdfdfdfdfffd</h1>
                          </div>
                          <!--- end of box border -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div></td>

Danne VMedlem sedan aug. 20068 090 inlägg

23 nov. 2008 19:09#2

Först en kommentar som egentligen inte har med frågan att göra: Din konstruktion med tabeller och divvar, och inte mindre än NIO nästade divvar verkar ganska konstig och småfarlig.

Sen ang. divven som inte sträcker sig neråt 100%: Såvitt jag vet kan man inte ge divvar höjd i procent öht. Man kan normalt fixa sånt med javascript (eller ibland lura användarens öga genom ett arrangemang med bakgrundsbilder).

Ett skript jag själv använt för att få samma höjd på två (eller fler) divvar är: http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

Men kanske nån guru här vet bättre....

MethodMedlem sedan apr. 2001357 inlägg

23 nov. 2008 19:46#3

Jaså? vad är faran med det? det är för att få skuggbilderna runt boxen. Finns det något bättre sätt att få det att funka?

jag tänkte att det skulle gå att få divarna och vara 100% höga så som man kan sätta att det ska vara 100% breda och det fungerar ju, men jag kanske har fel där...

Danne VMedlem sedan aug. 20068 090 inlägg

24 nov. 2008 07:27#4

Method skrev:

Jaså? vad är faran med det? det är för att få skuggbilderna runt boxen. Finns det något bättre sätt att få det att funka?

jag tänkte att det skulle gå att få divarna och vara 100% höga så som man kan sätta att det ska vara 100% breda och det fungerar ju, men jag kanske har fel där...

Jag skrev "verkade" för att jag inte kan minnas jag sett så många nästade divvar på en gång. Verkade lite halvgalet. Men om du vet att det funkar, så är ju allt OK.

Nej, bredder och höjder funkar inte riktigt på samma sätt, trots att man kan frestas att tro det. Mest för att en sida bygger ju olika mycket neråt (i höjdled alltså) beroende på bl.a. användarens inställningar, medan bredder är desamma oavsett samma inställningar.

jarvkloMedlem sedan juli 20013 378 inlägg

25 nov. 2008 00:03#5

Method skrev:

Jag håller på med en hemsida där jag stöter på ett problem (kolla på bilden).

"boxarna" ligger i en tabell med flera celler och då vill jag att "boxarna" ska fylla ut 100% på höjden precis så som dom gör på bredden. Hur löser man det?

Det enklaste sättet är att sätta höjder som inte är "auto" på alla inblandade element och "föräldrar"...

Orsaken att det inte funkar för dig är att föräldern till #content_box per automatik har fått höjdvärdet "auto", vilket är lite speciellt.

"auto" definieras nämligen när det gäller höjder som höjden av det egna elementets innehåll (och det relaterar alltså inte till förälderelementets höjd alls)

Det du råkar ut för är alltså att du får höjden att bli 100% av auto som är lika med auto, vilket gör att webbläsaren använder divvens innehålls egen höjd och inte tabellcellens höjd.

Du kan komma förbi problemet genom att sätta något annat än auto "hela vägen ut" - dvs sätt t.ex. höjderna 100% höjd på html och body, 100% på tabellen, och procentvärde på tabellcellen inuti tabellen så "löser det sig" (bortsett från att man aldrig helt kan lita på en höjd inuti en tabell eller tabellcell annat än i väldigt speciella fall numera - men det är en annan historia...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Ett av jarvklos exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html,body {margin:0; padding:0;height: 100%; background-color: #ccc; }
table {background-color: #fff; ;border: 1px solid red; width: 80%; height: 90%}
td {border: 1px solid blue;}
div {border: 1px solid teal;}
#content_box
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	text-align: left;
	width: 100%;
	height:100%;	
	background-color:#FFFFFF;
	}
#content_box div { height: 100%}
</style>
<table style="height:50%">
<tr>
<td style="height: 100%"><div id="content_box">
          <!--- box border -->
          <div id="lb">
            <div id="rb">
              <div id="bb">
                <div id="blc">
                  <div id="brc">
                    <div id="tb">
                      <div id="tlc">
                        <div id="trc">
                          <div id="content">
                            <h1>fdffdfdfdfdfdfdfffd</h1>
                          </div>
                          <!--- end of box border -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
	</td>
	</tr>
</table>

Testa

Hursomhelst är det råddigt med tabeller av flera skäl och det är, enligt min mening, inte enbart av "formella skäl" det finns orsak att undvika dem för layouter numera.

SydMedlem sedan feb. 2004489 inlägg

25 nov. 2008 06:17#6

Method skrev:

Jaså? vad är faran med det? det är för att få skuggbilderna runt boxen. Finns det något bättre sätt att få det att funka?

jag tänkte att det skulle gå att få divarna och vara 100% höga så som man kan sätta att det ska vara 100% breda och det fungerar ju, men jag kanske har fel där...

För dropshadows kring objekt rekommenderas A List Aparts artikel http://www.alistapart.com/articles/cssdropshadows/.

M.h.a deras metod kan man skippa fyra miljarder nested divs, och bara lägga till

class="skugga"

i dina IMG eller paragraf-taggar. En smula smidigare. Och definitivt renare kod. Med alla fördelar det ger.