www.webdeveloper.com
Page 4 of 4 FirstFirst ... 234
Results 46 to 57 of 57

Thread: DIV container adjusting to screen height

  1. #46
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    For the desired lay-out (although yet with the wrong CSS), see www.alpinetrekking.com/test. Here you'll see that I want a scrollable text field that leaves space for a header and a footer.

    cheers, Jochem
    "to live = to learn"

  2. #47
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Originally posted by jochem
    For the desired lay-out (although yet with the wrong CSS), see www.alpinetrekking.com/test. Here you'll see that I want a scrollable text field that leaves space for a header and a footer.
    Sorry, I'm confused again. What do you need help with? As far as I can see, you just need to float your menu left, your content DIV (with a percentage height but a pixel width, and of course an overflow-y:auto), clear left on footer1, and then clear both on footer2... Am I missing something?
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #48
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    I don't want a percentage height, it should exactly fit.
    "to live = to learn"

  4. #49
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    If I could have my content div stay 100 pixels clear from the top border and 25 pixels clear from the bottom border, I'd be served.
    "to live = to learn"

  5. #50
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    I am sorry, I worked all through the night and am quite tired. I am trying to express my needs clearly.

    Setting margin-bottom to the html and body elements may not be exactly what I need.

    All divs are placed within the BORDER div. Within this div most divs can be positioned easily using absolute positioning.
    They have fixed positions and dimensions. But some aren't. So here comes the tricky part:

    1. The TEXT div that contains the actual text has an obvious top and left positioning. But its bottom should exactly touch the positioned FOOTER2 div.
    2. Both the FOOTER divs should be positioned at the bottom of the BORDER div. However, the bottom property is poorly supported by older browsers.
    3. The MENU div now continues below the BORDER div, but it should only continue until the border.

    I hope this clears things up.

    cheers, Jochem
    "to live = to learn"

  6. #51
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Originally posted by jochem
    1. The TEXT div that contains the actual text has an obvious top and left positioning. But its bottom should exactly touch the positioned FOOTER2 div.
    2. Both the FOOTER divs should be positioned at the bottom of the BORDER div. However, the bottom property is poorly supported by older browsers.
    3. The MENU div now continues below the BORDER div, but it should only continue until the border.
    1. This is why I said to give it a percentage height. The height should be less than or equal to 100% of the page, minus the combined height of both footers.

    2. Do margin-top: 100% on them, and then add a negative margin-bottom which is equal to the height of the footer. (If that doesn't work, you may try margin-bottom: height of footer2 on footer2 and margin-bottom: height of footer2 plus height of footer1 on footer1.)

    3. Wouldn't this be an issue with height as well?
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  7. #52
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    1. Maybe I should explain it like this: I don't want to use the browsers' scrollbar. The whole page should be static once on screen,
    where its vertical size automatically adjustst to the viewport. Only the MAIN div should have its own scrollbar, using 'overflow-y:auto'.
    Therefore a div that continues below the viewport (or in this case, the BORDER div) is unwanted.

    Using a percentage for the div height does not result in what I want. Just try resizing my test page.
    Both the CLIFF and the The MAIN divs on this page have a percentage height. As a result their bottoms do not line up with the rest.
    FOOTER2 is 15 pixels high, so the CLIFF and MAIN divs should reach down until 15 pixels from the bottom border.
    That's why I was thinking of using the margin-bottom property for the CLIFF and MAIN div.

    2. Then there is the two FOOTER divs, for which I used 'bottom:0px' to position. I tried your 'margin-top:100%; margin-bottom:0px;' sollution,
    but it didn't work out. It left a bottom margin. I did not quite understand your alternative sollution, so please help me out here.

    3. Also, the bottom border is now below the viewport, which is unwanted. The top-and bottom borders should stay clear 4 pixels of the viewport edges.

    4. For some reason, there is an unwanted 1 pixel gap between FOOTER2 and the bottom border. How come?

    Now I must admit that I have been playing around a bit with the page design since I started this thread. I am sorry if this is causing some confusion.
    Still, the problem is the same. Please have a look at the code of the testpage I linked to above.

    cheers, Jochem
    "to live = to learn"

  8. #53
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    I found a possible solution here, but it uses JavaScript, just like Tonyh suggested earlier on. However, it does not work in older browsers, and I want to avoid using JavaScript.

    To visualize what I want, I have created a frames page which shows what I would like to have done with CSS only. Try resizing the viewport and notice how the design adjusts.

    According to Jona I am trying to re-invent the wheel. Is it really that hard? Or maybe I'm just missing something. I am not familiar with the 'float' and 'clear' rules.

    cheers, Jochem
    Last edited by jochem; 01-29-2005 at 09:11 PM.
    "to live = to learn"

  9. #54
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    Accepting there is no pure CSS solution for this problem , there seem to be three options to go with:

    1. using a frameset.
    2. using a table with as much table coding as possible in php-includes.
    3. using a php script to redirect to a certain stylesheet, depending on the users screen resolution. This script would be in the head of each page.

    Now all three options have their own dis-advantages:

    1. This would, by far, be the easiest solution. However, search engines have trouble crawling frames, which needs a work-around (although I heard this is an outdated problem). Plus, it would take JavaScript to ensure that users will always open the whole frameset, and not just one frame (or can this be done with php?)
    2. Tables are not ment for page lay-outs. Plus, although using php-includes, it would still take a lot of coding, resulting in a slower page.
    3. All heights must be set absolute, so there can be no liquid design.

    I haven’t quite decided yet which option to go with. What would you suggest? And do you agree these would be the only options in the first place?

    cheers, Jochem
    "to live = to learn"

  10. #55
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    I apologize, I've been extremely busy lately, and I haven't had time to look further into your problem. I would say go with faux columns and forget trying to have a specific height for a screen resolution. It's causing you more trouble than it's worth, and additionally I tend to dislike pages with internal scrollbars - they're usually complex, difficult to read, and often the mouse wheel does not work on them. Just my thoughts.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  11. #56
    Join Date
    Dec 2004
    Location
    New York, USA
    Posts
    194
    I've been trying something similiar for an old tutorial of mine.
    I managed to get everything to work in ie 6.0 and firefox.

    Then I realised Visual Studio .Net 2003 was putting the following
    in my page.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    When I changed it to XHTML I lost the stretching affect for the navigation and the scrolling stopped working for the content.

    Now I'm not sure what to do. I could use the 4.0 doctype but I'll probably have to redo the site again in a couple of years.
    "An expert is a man who tells you a simple thing in a confused way in such a fashion as to make you think the confusion is your own fault."
    - William Castle

    www.baseiber.com - portfolio containing some of my work.
    http://www.ideallandscapesolutions.com - my first brochure style website.

  12. #57
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    What about still using different stylesheets for different screen resolutions? I could include a code in the HEAD section of each page that would look like this:
    Code:
    <head>
    <script language="Javascript1.2">
    	<!-- 
    	if      (screen.width <= 800) {document.write('<link rel="stylesheet" type="text/css" href="div/stylesheet-low.css">')}
    	else if (screen.width = 1024) {document.write('<link rel="stylesheet" type="text/css" href="div/stylesheet-mid.css">')}
    	else if (screen.width > 1024) {document.write('<link rel="stylesheet" type="text/css" href="div/stylesheet-high.css">')}
    	//-->
    </script>
    <noscript><link rel="stylesheet" type="text/css" href="div/stylesheet-mid.css"></noscript>
    </head>
    cheers, Jochem
    Last edited by jochem; 02-26-2005 at 03:03 PM.
    "to live = to learn"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles