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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Heights

Status
Not open for further replies.
ice78991

ice78991

Programmer
Nov 20, 2006
216
I read recently that a block level element such as a div will automatically be the same height as its parent's height ( ie fill the content area of its parent in terms of width and height)

If this is correct then why does the following not fill the entire page with a green block ?

<html>
<body>
<div style="background-color:#99FF66"></div>
<p>No Margins</p>
</body>
</html>
 
Sort by date Sort by votes
Maybe the margins collapse back to 0 if no value is specified
 
Upvote 0 Downvote
Well, for a start how does the parent block know it's supposed to fill the full page? Taking your example, you could add the height to the body tag but you would still want to tell the div to expand as well e.g.
Code: 
<html>
<body style="height:100%;">
<div style="background-color:#99FF66;height:100%;"></div>
<p>No Margins</p>
</body>
</html>



____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
ice78991 said:
I read recently that a block level element such as a div will automatically be the same height as its parent's height (ie fill the content area of its parent in terms of width and height).
Click to expand...
This is incorrect, although one part of the statement would hold true. It is true that the parent will, by default, expand to fit the child, so they will automatically be the same width and height. But it will happen the other way around: The parent's height will, unless specified differently, automatically adjust to fit the child element.

Your example is riddled with flaws. When you state (in your paragraph) "No Margins" your paragraph actually has default padding or margin, depending on the browser's rendering engine. You would need to cancel all that out before you try it.

Widths work in a way you expect. Unless specified (or unless floated), block level elements will always take up 100% of their parent's width. Height however works differently. Unless specified, it will always match the content in the element.
 
Upvote 0 Downvote
There is one more thing to add to what Vragabond said. The <body> tag by default has some margins added to it. Your div won't span the entire width of the browser screen cause of that. If you specify margin:0px for the body, it will span the browser content area.

<.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Making blocks of different heights line up
Replies
6
Views
72
vacunita
vacunita
Baldwin238
  • Locked
  • Question
Variable line-heights in one div? 1
Replies
7
Views
29
Baldwin238
Baldwin238
Halloko
  • Locked
  • Question
Matching two panes' heights 1
Replies
2
Views
12
Halloko
Halloko
frozenpeas
  • Locked
  • Question
Equal div heights with 3-column layout
Replies
4
Views
19
frozenpeas
frozenpeas
sthmpsn1
  • Locked
  • Question
layer heights
Replies
3
Views
16
sthmpsn1
sthmpsn1

Part and Inventory Search

Sponsor

Back
Top