html - Problems with scrolling div size -

html - Problems with scrolling div size -

i'm trying create scrollable html-div, size messed 1 time add together div above within same container. see code below; header div hidden, other div right size. 1 time enable header, other div extend below bottom of parent.

why this, , how can prevent it?

css

.div2 { width:40%; height:400px; border:2px #000 solid; } .div-header { padding:20px; background-color:#fee; /* display:none; */ } .div2-body { background-color:#efe; overflow:auto; height:100%; }

html

<div class='div2'> <div class='div-header'>header<br>section</div> <div class='div2-body'> lorem ipsum dolor sit down amet consectetuer amet vivamus nibh sagittis sed. penatibus ligula interdum tincidunt orci ante tellus justo amet enim maecenas. phasellus amet lacus tristique habitant non dictum vitae dignissim urna urna. tempor lobortis curabitur dui nibh dui mi id vestibulum fringilla sit. quis volutpat orci laoreet vitae nec orci quis in rutrum elit. odio duis amet morbi faucibus. massa nulla curabitur convallis sapien nibh habitant hendrerit tempus eget est. auctor enim quis et praesent donec convallis turpis nam curabitur sed. ac vitae risus ut curabitur vel id elit leo sem facilisi. ligula consectetuer convallis sem integer feugiat sapien risus adipiscing facilisis commodo. enim laoreet ipsum sagittis parturient id nibh integer porttitor wisi donec. ut est dui ut sem consectetuer. laoreet penatibus tortor quis gravida tortor nullam justo maecenas pretium a. convallis ut morbi integer et est nam lacus enim vivamus semper. auctor sed pede justo nisl pellentesque lacinia curabitur est velit sagittis. neque venenatis et ut odio malesuada nulla vestibulum dui iaculis consectetuer. vivamus nascetur tempus vestibulum tincidunt nibh nunc. risus nulla semper tellus consequat orci ac sed auctor leo nulla. vitae nec libero felis interdum dolor consequat pellentesque nunc nam velit. curabitur ante id egestas tellus fames curabitur interdum quam pellentesque eget. odio gravida ut sapien nullam suspendisse hendrerit lacinia cum curabitur metus. congue tincidunt elit turpis eget volutpat aliquet neque est curabitur dui. enim aenean donec leo nibh vitae. sed in aenean odio molestie ut aliquam nulla european union convallis elit. nam tempus ornare @ eros et elit dui congue aenean est. ridiculus mollis dui lacinia justo dui vitae nullam eget metus sed. orci senectus tempor aliquam aenean lobortis interdum ligula mi maecenas iaculis. et pulvinar condimentum lorem tempus dictumst quis enim lorem amet. laoreet non auctor aliquam hac. </div> </div>

[edit]

to explain further, trying accomplish: want div @ fixed position in browser, eg. position:fixed; left:100px; top:100px div include 2 child-divs: 1 header (non-scrollable), , "contents" div, should scroll 1 time contents extend beyond page bottom.

i've got of working, ran problem scrolling div. in fact, "div2" needs pegged bottom (with 20px margin), resize when browser resized, cannot have fixed height. messed around bit divs work, apparently, until now, can't :(

hope explains improve seek make.

remove height property main div(to avoid fixed height), automatically handle height per kid divs , scroll work fine.

use next css:

<style type="text/css"> .div2 { width: 40%; border: 2px #000 solid; } .div-header { padding: 20px; background-color: #fee; /* display:none; */ } .div2-body { background-color: #efe; overflow: auto; height: 400px; } </style>

html css