Проблем с height: 100%;

[god_of_cs]

Скъсах си нервите. Искам да направя height: 100%; на див във див.
Искам да се получи така, вижте 3-те колонки как са разтегнати до края на DIV : http://prikachi.com/images/570/3962570X.png

Един приятел ми каза, че това става с javascript, но не намерих нищо.

Благодаря предварително.

 

[jubox]

аз лично неразбрах какво искаш да направиш...дай малко код и обясни кой див искаш и какво искаш да направиш с него ,че незнам на мен ли ми има нещо или ти неси обяснил

 

[god_of_cs]

И да покажа код, няма файда. Искам в главният див (Div1) да има друг Div2, който е висок колкото височината на Div1. Тоест ако Div1 е висок 200px, Div2 също да е 200.

 

[jubox]

еми просто правиш див1 и вътре правиш див2 на див1 и див2 задаваш еднаква височина:

<div style="width: 400px;height: 400px;background: #9e9e9e;">
<div style="width: 300px;height: 400px;background: #000;margin-left: 30px;">
</div>
</div>

 

[IvanAdamov]

Задаваш на Див1 position:relative;

И на другия пишеш height:100%;
И ще е висок колкото вид 1.

 

[god_of_cs]

[css]body2 {
width: 80%;
height: auto;
margin: auto;
min-height: 200px;
background: #e2e2e2;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-left: 1px solid #161616;
border-right: 1px solid #161616;
border-bottom: 1px solid #161616;
position:relative;
}

#leftcol {
width: 22%;
height: 100%;
float: left;
background: #f3f3f3;
}
[/css]
Направих го така, но няма ефект.
@jubox - височините ще са променливи, затова е в проценти.

 

[bytheway]

Ето това е моя вариант и работи перфектно.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#content {width:600px;margin:auto;}
#div1{width:500px;;height:400px;background-color:#00CCFF;}
#div2{width:50%;height:100%;background-color:#9C6;}
</style>
</head>
<body>
<div id="content">
    <div id="div1">
    	<div id="div2">
        </div>
    </div>
</div>
</body>
</html>

Това е крайния резултат, който получавам.

 

[god_of_cs]

Проблемът, е че съдържанието както казах се променя. Тоест главният див може да е 928 пиксела, а вътре не мога да го сложа така. И аз го направих така, но не работи height:100%; и затова търся решение.

 

[bytheway]

Ако заместиш в предишния код CSS-a с този би трябвало да проработи. Но в случай, че имаш вертикален скрол тогава трябва да смениш height-a на #content на min-height:

Повече тук

[css]
<style type="text/css">
*{margin:0px;padding:0px;}
html{height:100%;}
body{height:100%;}
#content {width:600px;margin:auto;height:100%;}
#div1{height:100%;background-color:#00CCFF;width:500px;}
#div2{height:50%;background-color:#9C6;width:50%;}
</style>
[/css]

 

[god_of_cs]

Bytheway - темплейта ще се ползва от много хора, затова търся друго решение. Просто от вчера до сега мислих какви ли не простотии - просто явно е писано да fail-на

 

[IvanAdamov]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#maindiv {
width: 80%;
height: auto;
margin:30px auto;
min-height: 400px;
background: #e2e2e2;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-left: 1px solid #161616;
border-right: 1px solid #161616;
border-bottom: 1px solid #161616;
position:relative;
}

.leftcol {
width: 22%;
height: 100%;
left:0px;
background-color:green;
position:absolute;
float:left;
}
.midcol {
width: 50%;
height: 100%;
margin:auto;
background:#fff;
min-height:650px;
}
.rightcol {
width: 22%;
height: 100%;
right:0px;
top:0;
background:#fff;
position:absolute;
float:left;
}
</style>
</head>

<body>
<div id="maindiv">
	<div class="leftcol">
    </div>
    <div class="midcol">
    </div>
    <div class="rightcol">
    </div>
</div>
</body>
</html>

Дерзай

Минимума на мейн дива е 400px, и ако контента в средата е по-малко от 400px сайта остава толкова. Ако е повече от 400 както в случая, се уголемява според размера на средния див.

 

[god_of_cs]

Това го знам за Min-height. Благодаря, стана. Върши ми перфектна работа :?:

 

[IvanAdamov]

Радвам се да помогна.