473,322 Members | 1,405 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Problem with the heights

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
3 1124
Dormilich
8,658 Expert Mod 8TB
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
David Laakso
397 Expert 256MB
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
thanks all but i will get it by j.s - easier
Sep 3 '08 #4

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

Similar topics

7
by: lauren quantrell | last post by:
A while back I got a requirement for the client to be able to adjust the relative heights of two subforms by click-dragging the mouse and I came up with a kludge solution using a border control...
1
by: Brian | last post by:
I've used the syncfusion method to autosize my datagrid row heights. The problem I run into is the vertical scrollbar does not take into account the new row heights. When I scroll to the bottom I...
1
by: Jarry | last post by:
I just play around mainly in javascript, and I was making a web page (http://www.freewebs.com/prugle/games.htm). I have asked a few people to look at it, and so I have. Some people can see the...
6
by: fido19 | last post by:
Once upon a time, there lived a chimpanzee called Luycha Bandor (aka Playboy Chimp). Luycha was unhappily married to Bunty Mona, a short but cute little lady chimp. Luycha was tall and handsome –...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.