By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,261 Members | 1,674 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,261 IT Pros & Developers. It's quick & easy.

Problem with the heights

P: 9
Hello
I got 3 divs – top bottom and middle,
The top have to be always 20px and always on the top
The bottom have to be always 20px and always on the bottom page
The mid will get a scroll if overflow
The page has to kip its 100% not more.

This is my cod – don’t know hot to do it..

Expand|Select|Wrap|Line Numbers
  1.     <style>
  2. .top
  3. {
  4.     width: 100%;
  5.     height: 20px;
  6.     background-color: Gray;
  7. }
  8.  
  9.  
  10. .mid
  11. {
  12.     width: 100%;
  13.     background-color: Olive;
  14.     position:relative;
  15.  
  16.     overflow: auto;
  17. }
  18. .botom
  19. {
  20.     width: 100%;
  21.     height: 20px;
  22.     background-color: Teal;
  23.     position: absolute;        
  24. }
  25.  
  26.     </style>   
  27.  
  28.         <div class="top">
  29.             top
  30.         </div>
  31.         <br />
  32.         <div class="mid">
  33.             middle<br />
  34.             middle<br />
  35.             middle<br />
  36.             middle<br />
  37.             middle<br />
  38.             middle<br />
  39.             middle<br />
  40.             middle<br />
  41.             middle<br />
  42.             middle<br />
  43.             middle<br />
  44.             middle<br />
  45.             middle<br />
  46.             middle<br />
  47.             middle<br />
  48.             middle<br />
  49.             middle<br />
  50.             middle<br />
  51.             middle<br />
  52.             middle<br />
  53.             middle<br />
  54.             middle<br />
  55.             middle<br />
  56.             middle<br />
  57.             middle<br />
  58.             middle<br />
  59.             middle<br />
  60.             middle<br />
  61.             middle<br />
  62.             middle<br />
  63.             middle<br />
  64.             middle<br />
  65.             middle<br />
  66.             middle<br />
  67.             middle<br />
  68.             middle<br />
  69.         </div>  
  70.     <br />   
  71.         <div class="botom">
  72.             bottum
  73.         </div>
  74.  
  75.  
thanks
Sep 2 '08 #1
Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
This is why frames were invented in the first place.
To get an element stay where it is you can use position: fixed (not working in IE), plus a padding (or margin) of the underlying element. getting the footer in the right position might be the tricky part, there you should have a look at this thread.
Sep 2 '08 #2

Expert 100+
P: 397
See this page by Georg Sotun [1]. Note that IE/6 and down need to be in quirksmode or it will fail in those browsers. Maintain the xml declartion
Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
above the doctype, as he has done, to put IE/6 and down in quirks-- and you're good to go...
[1] moa_08.html
Sep 2 '08 #3

P: 9
thanks all but i will get it by j.s - easier
Sep 3 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.