Child ska vara 100% höjd av parent. Men det fungerar inte.

1 svar · 433 visningar · startad av saturday 9 jan. 2010

saturdayMedlem sedan jan. 2007133 inlägg

Trådstart9 jan. 2010 11:22#1

Hej!

Jag har ett problem. Jag har byggt en box. Boxen innehåller sedan nio boxar på tre rader. Detta för att jag har gjort en egen ram i form av bilder som ska omsluta en text/innehållsbox.

På den mittersta raden ska de två yttre divarna anpassa höjden efter den mittersta diven, dvs diven som får innehållet. Problemer är att när jag sätter 100% width, se nedan, så blir dess höjd 0px.

Vore tacksam för hjälp.

det allra enklaste är att ni kollar in denna länk och även kollar källan: http://www.jborg.se/00/C&G/box.html Har kommenterat där i koden också. Men har klippt in det väsentliga nedan:

    <!-- "Mitten-raden" -->
	<div style="clear: both;">
    	        <div style="border: solid 1px #000; width: auto; height:auto; overflow: hidden;">
        	<!-- Och denna div ska vara 100% för att anpassa sig efter parent - Men detta är det som inte fungerar -->
		<div style="float: left; width: 22px; [B]height: 100%[/B]; background: url(img/box/08.png) repeat-y;"></div>
    		<div style="float: left; width: 622px; height: auto; background:#FFF">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
            <!-- Och denna div ska vara 100% för att anpassa sig efter parent -->
       		<div style="float: left; width: 22px; [B]height: 100%[/B]; background: url(img/box/04.png) repeat-y;"></div>
    	</div>
	</div>

saturdayMedlem sedan jan. 2007133 inlägg

9 jan. 2010 16:59#2

Löste det själv genom att tänka om. Detta var min lösning:

<div style="clear: both;">
	<!-- Översta kanten -->
	<div style="clear: both;">
		<div style="float: left; width: 22px; height: 22px; background: url(img/box/01.png) no-repeat;"></div>
    	<div style="float: left; width: 622px; height: 22px; background: url(img/box/02.png) repeat-x;"></div>
       	<div style="float: left; width: 22px; height: 22px; background: url(img/box/03.png) no-repeat;"></div>
	</div>
    <!-- "Mitten-raden" -->
	<div style="clear: both;">
    	
    	<div style="width: 666px; height: auto; background: url(img/box/08.png) repeat-y; background-position:top left;">
        <div style="width: 622px; height: auto; background: url(img/box/04.png) repeat-y; background-position:top right; padding: 0 22px 0 22px">
        	<!-- Och denna div ska vara 100% för att anpassa sig efter parent - Men detta är det som inte fungerar -->text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </div>    
    	</div>
	</div>
    <!-- Nedre kanten -->
    <div style="clear: both;">
		<div style="float: left;width: 22px; height: 22px; background: url(img/box/07.png) no-repeat;"></div>
    	<div style="float: left; width: 622px; height: 22px; background: url(img/box/06.png) repeat-x;"></div>
       	<div style="float: left; width: 22px; height: 22px; background: url(img/box/05.png) no-repeat;"></div>
	</div>
</div>