Potrebna mi je pomoc oko automatske visine DIV-a. U glavnom, u div-u (container), postoje dva DIV-a, od kojih jedan (box_1) treba da bude 100% visok koliko i parent div (container) ciju visinu treba da odredjuje visina sadrzaja div-a box_2.
Jednostavno box_1 nece da prati visinu tog container-a.
Primetio sam da ako zadam visinu za "container", onda se sadrzaj iz box_2 preliva preko ili ako koristim overflow, pojavi scroll ili ga sakrije.
Code:
<html>
<head>
<style>
.container{
position: relative;
border: 2px solid black;
background: red;
width: 800px;
padding: 0;
overflow: auto;
}
.box_1{
position: relative;
background: green;
height: 100%;
width: 200px;
padding: 0;
float: left;
}
.box_2{
position: relative;
background: yellow;
width: 200px;
padding: 0;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="box_1">BOX_1</div>
<div class="box_2">BOX_2
<p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P>
<p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P>
<p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
.container{
position: relative;
border: 2px solid black;
background: red;
width: 800px;
padding: 0;
overflow: auto;
}
.box_1{
position: relative;
background: green;
height: 100%;
width: 200px;
padding: 0;
float: left;
}
.box_2{
position: relative;
background: yellow;
width: 200px;
padding: 0;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="box_1">BOX_1</div>
<div class="box_2">BOX_2
<p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P>
<p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P>
<p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P>
</div>
</div>
</body>
</html>