www.webdeveloper.com
Results 1 to 5 of 5

Thread: Column BG image won't extent, 100% height

  1. #1
    Join Date
    Dec 2009
    Posts
    8

    Column BG image won't extent, 100% height

    I have a left column with a background image and another background image for the body so it fills the rest of the screen. I have content area to the right of the left column that will extend vertically past the browser window. With the left column set to 100% height, once I scroll down the background image for the left column will not extend past the original size of the screen. Is there a pure css way to have the left column extend past the original height of the browser window, to match the content area?

    http://ophilium.com/test/test.html

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    256

    Would this work?

    From http://www.dreamincode.net/forums/to...screen-height/
    ... the problem was resolved when I added html. [plus min-height: 100%].. I don't know why this changes anything but it works.
    html, body { *height:100%; min-height:100%; }
    A couple of years ago saw something about making the <div> position: absolute; with top, bottom and side (left or right) set to zero so it would cling to edges of parent (which would have to be a positioned element or the browser window). If the absolute div had content longer than parent, there would be scroll bars (unless overflow: hidden).

  3. #3
    Join Date
    Apr 2012
    Location
    winston-salem NC
    Posts
    8
    One option (would cause your left div to stay put even when scrolling though.:

    #left {
    position:fixed;
    left:0;
    right:0;

    background-repeat: repeat-y;
    width: 207px;
    padding: 10px;
    float: left;
    height: 100&#37;;
    background-image: url(../images/leftPanel.png);.png);
    }

  4. #4
    Join Date
    Apr 2012
    Location
    winston-salem NC
    Posts
    8

    Correction

    left & top NOT right, my bad

    Quote Originally Posted by webjunke View Post
    One option (would cause your left div to stay put even when scrolling though.:

    #left {
    position:fixed;
    left:0;
    top:0;

    background-repeat: repeat-y;
    width: 207px;
    padding: 10px;
    float: left;
    height: 100%;
    background-image: url(../images/leftPanel.png);.png);
    }

  5. #5
    Join Date
    Dec 2009
    Posts
    8
    Quote Originally Posted by webjunke View Post
    left & top NOT right, my bad
    Yeah, this is good but I didn't mention that content on the left and right will be dynamic. So if the content is vertically long (past the screen size) on the left the user can't get to it with a fixed positioning. thx though

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