ansaurus

Question

Answer 1

A:

you can add one more div in div2 to display content in it. actually that div will have 100px top margin to avoid top div overlapping on your content. div2 will extend from top to bottom but top 100px won't be used by content div.

so trick is, keep div1's height same with content's top margin. then it'll be fine

html:

<body>
<div class="div1">div1 div1 div1 div1</div>
<div class="div2">
  <div class="content">
    <div2 test <br/>
    <div2 test <br/>
    <div2 test <br/>
    <div2 test <br/>
  </div>
</div>
</body>

and css will be something like:

html,body {height:100%;width:300px;margin:0px;}
div.div1 {height:100px; background-color:red; position:absolute; width:300px;}
div.div2 {background-color:blue; height:100%;}
div.content {margin-top:100px; float:left; width:100%;}

if you want to hide scroll completely just add overflow:hidden to div.div2

also you can give same background color to container make div2 look seamless.(it wont extend after scroll.)

div.content {margin-top:100px; float:left; width:100%; background:blue;}

cheers

ilhan negis 2010-01-27 11:36:21

ansaurus

tags:

views:

answers:

css fixed header and floating content

related questions