Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Div Height

Status
Not open for further replies.
vasah20

vasah20

Programmer
Feb 16, 2001
559
US
How can I make the background color of a div extend past the page fold?

Example:
--
<html>
<head>
<style>
* {
margin: 0px;
padding: 0px;
}
#container {
background-color: #ccc;
clear: both;
height: 100%;
width: 50%;
}
</style>
</head>
<body>
<div id="container">
<p>Lorem ipsum...</p>
</div>
</body>
</html>
--

Please substitute the "Lorem ipsum" with content that forces the use to scroll down. When you scroll down, I will lose the CCC background of the div. This feels like it'd be a trivial fix, but I'm not sure what I'm over looking.

TIA
leo

 
Sort by date Sort by votes

Remove the "height:100%;".

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
BillyRay, that helps, but my question now is what if I want the gray box to go down to the bottom of the page if there isn't enough content?

BabyJeffy, that helps too, but I'm trying to stay away from a table based layout. Thanks for the idea, though.

 
Upvote 0 Downvote

but my question now is what if I want the gray box to go down to the bottom of the page if there isn't enough content?
Click to expand...

Now that is a different question entirely. Are there any other criteria you're not mentioning?

Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Sorry, I thought there was a solution that handled both scenarios.

The way it works is I have no idea how much (or how little) content will be in the gray box. I would like the gray box to always extend to the bottom of the page no matter what the height inside.

I apologize for not providing enough information in the beginning, I just thought this would be a common problem and there would be an easy solution (that takes care of both scenarios).

Again, any help would be appreciated.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
338
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
267
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
298
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
124
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top