webForumDet fria alternativet

Få alla div inne i div 100% hög

HTML & CSS

4 svar · 912 visningar · startad av Asa

Medlem sedan dec. 20011 860 inlägg
Frågan#1

Har denna koden som jag testat ändrat i men får inte till så att alla div inne i diven container får 100% höjd. Hur ska jag ändra?

Har testat lägga en inner3 typ i left2 och döpt om till inner2 och anpassat men får ej till det.
http://www.gruvsjo.se/test.html

<style>
div {
    font-family: Tahoma, Verdana sans-serif;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #000;
}
.container {
	width: 1190px;
    position: relative;
    background-color: yellow;
 }
.left1 {
	width: 400px;
	float: left;
    padding: 20px;
	border-radius: 4px 0px 0px 4px;	
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.left2 {
	width: 510px;
	float: left;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 20px;
}
.left3 {
	width: 224px;
	float: left;
}
.inner3 {
	height: 100%;
	position: absolute;
    padding: 20px;
	background-color: #f9f9f9;
	border-radius: 0px 4px 4px 0px;	
    border-top: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.clear {
	clear: both;
	height: 0;
}
</style>
<div class="container">

    <div class="left1">
	    	1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
	    	dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
	    	ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
	    	eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
	    	deserunt mollit anim id est laborum. 
    </div>

    <div class="left2">
	    	2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
	    	dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
	    	ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
	    	eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
	    	deserunt mollit anim id est laborum. 
    </div>
    
  	<div class="left3">
    	<div class="inner3">
    		3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    	</div>
  	</div>
    
  	<div class="clear">&nbsp;</div>
  	
</div>
Medlem sedan juni 2012581 inlägg
#2

Använd positionering istället för height. Pröva att sätta "top: 0; bottom: 0;" och se vad som händer.

Medlem sedan juni 20019 519 inlägg
#3

prplxr skrev:

Använd positionering istället för height. Pröva att sätta "top: 0; bottom: 0;" och se vad som händer.

Så länge den är static eller relative i position kommer detta inte hjälpa.

Antingen få du köra containern som en display table och alla barn som display table-cell (och ta bort alla floats dvs), eller kollar du in flexbox (om du inte bry dig om IE allt för mycket).

Vet inte riktigt om det är så här sidan skall se ut men du kan ju ha bordern runt container klassen istället och köra den vita bakgrunden på den.

Medlem sedan dec. 20011 860 inlägg
#4

Ska testa och återkommer.

Medlem sedan dec. 20011 860 inlägg
#5

Perfekt. Funkade fint med display table och display table-cell :)

264 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)
124 ms — ändringar (db)