2

There is an inline-block element with 100% height and width :

<div style="width: 100%; height: 100%; background: red; display: inline-block">Y</div>

Why doesn't this div take up whole height, but takes up full width?

  • You need `height: 100%;` set on `html` and `body` for it to take up full height. `inline-block` treats it as inline first (like text), it only takes up 100% height of the content without adding the aforementioned `height` to `html` and `body`. – TylerH Jul 13 '14 at 16:43

5 Answers5

3

An auto width on a block box causes it to be as wide as its containing block allows. An auto height, on the other hand, causes it to only be as tall as its contents.

The block box in question is body, and by extension, html. Neither element has an intrinsic height (even though the initial containing block does), so the height of both elements defaults to auto.

The 100% width and height of the inline-block respect the used width and height of its containing block, which in this case is body. If you specify any arbitrary height on body, or height: 100% on both html, body, then the inline-block will be adjusted accordingly.

Note that because an inline-block is essentially the same as a block box except laid inline, percentage width and height are calculated the same way as if the element were block-level.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

Because your html and body tags don't take full height.

Unless specified otherwise, block elements take full width, but only as much height as needed - it is only natural, since HTML was originally meant as a way to format text documents. You wouldn't want, say, a paragraph to take the full window height.

You must set their height to 100% to get it work - stretch them to the window height:

html, body {
    margin: 0;
    padding:0;
    height:100%;
}

http://jsfiddle.net/gdyLs/1/

MightyPork
  • 18,270
  • 10
  • 79
  • 133
  • 1
    This doesn't answer the question of why. – TylerH Jul 13 '14 at 16:44
  • @TylerH not sure what more explanation you'd want. – MightyPork Jul 13 '14 at 16:44
  • 1
    The question is **why** this `inline-block` doesn't take up the whole height of the body. Your answer says, essentially "because it doesn't." While your code does solve the problem, it doesn't do a good job of explaining, and an explanation was the real request. – TylerH Jul 13 '14 at 16:47
  • Now there is some explanation, but I don't think it needed it. – MightyPork Jul 13 '14 at 16:50
0

It takes height of its parent

try:

html,body {
    height: 100%;
}
Robbin Benard
  • 1,542
  • 11
  • 15
0

That's because a div by default takes full width, unless specified otherwise.

Making it inline-block, just allows it to be inline, but preserving its block nature such as setting width and height, top and bottom margins and paddings.

And the height of every element(not-null) in html markup is same as height of a line.. which can be changed by line-height property.

And if you wish it to take all-height, follow the above answers.

nsthethunderbolt
  • 2,059
  • 1
  • 17
  • 24
-1

You need to specify height to html and body then only that div will take 100% height

html, body{
    height: 100%;
}
amol
  • 1,535
  • 9
  • 10