Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get Expanding Middle Div

    Hello Everyone,

    I'm new here, I have this problem with this website that I cannot get worked out.

    I'm creating a page that will expand vertically and horizontally.

    Expanding horizontally isn't a problem, it's the vertical one that is.

    To simplify the site I created, I'm just going to use 3 divs as an example.

    I have a header div, which is a fixed height, b/c it uses banner images that I don't want to stretch.

    Then there's the bottom div, which is basically another banner which I do not want to stretch.

    Now here lies my problem, I want the middle content Div to stretch to fill the remaining space from the header and bottom div as the resolution changes or the browser is resized without generating the dreaded scrollbar

    I know this is mixing fixed heights and percentages, which complicates things. Can this be done, where you have a fized size header and footer with a expanding middle to fit a browser window?

    Thanks for any help
    Last edited by vid401t; 06-06-2007 at 02:02 PM. Reason: experimenting code

  • #2
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is some simple code of what I'm trying to do, as you can see, the bottom box dissappears and the browser scroller appears when you try to resize the window:
    Code:
    <style type="text/css">
    #header{
    	height: 200px;
    	width: 100%;
    	border: 1pt solid black;
    }
    #content{
    	height: 50%;
    	width: 100%;
    	border: 1pt solid black;
    }
    #footer{
    	height: 200px;
    	width: 100%;
    	border: 1pt solid black;;
    }
    
    
    
    </style>
    	<div id="header">header</div>
    	<div id="content">content</div>
    	<div id="footer">footer</div>

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Keep in mind that a percentage height has no effect for an element in the normal flow if its containing block has no explicitly set height.

    For this kind of layout one would probably have to do something like this:
    Code:
    html, body {
      height: 100%;
    }
    If you need more advice we probably need a link to the page so that we can inspect for ourselves.


  •  

    Posting Permissions

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