/    Sign up×
Community /Pin to ProfileBookmark

Column BG image won’t extent, 100% height

Copy linkTweet thisAlerts:
Apr 28.2012

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?

[URL=”http://ophilium.com/test/test.html”]http://ophilium.com/test/test.html[/URL]

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@auntniniApr 28.2012 — From http://www.dreamincode.net/forums/topic/120578-expanding-a-wrapper-div-to-fill-screen-height/

... the problem was resolved when I added [B]html. [plus min-height: 100%][/B].. I don't know why this changes anything but it works.

html, body { *height:100%; min-height:100%; }
[/quote]

A couple of years ago saw something about making the <div> [B]position: absolute;[/B] 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).
Copy linkTweet thisAlerts:
@webjunkeApr 30.2012 — One option (would cause your left div to stay put even when scrolling though.:

#left {

[COLOR="red"] position:fixed;

left:0;

right:0;[/COLOR]

background-repeat: repeat-y;

width: 207px;

padding: 10px;

float: left;

height: 100&#37;;

background-image: url(../images/leftPanel.png);.png);

}
Copy linkTweet thisAlerts:
@webjunkeApr 30.2012 — left & top NOT right, my bad

One option (would cause your left div to stay put even when scrolling though.:

#left {

[COLOR="red"] position:fixed;

left:0;

top:0;[/COLOR]

background-repeat: repeat-y;

width: 207px;

padding: 10px;

float: left;

height: 100%;

background-image: url(../images/leftPanel.png);.png);

}[/QUOTE]
Copy linkTweet thisAlerts:
@ophiliumauthorApr 30.2012 — left & top NOT right, my bad[/QUOTE]

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
×

Success!

Help @ophilium spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...