CSS: 100%-height/width DIV inside a bordered div creates vertical, but not horizontal scrollbars_问答_开发者

CSS: 100%-height/width DIV inside a bordered div creates vertical, but not horizontal scrollbars

开发者 https://www.devze.com 2023-02-14 11:49 出处：网络

Hello and thanks for listening. This is not an urgent question for me, I\'m just curious about why the following code does what it does. I wanted to have a border (or margin) around the visible page,

Hello and thanks for listening. This is not an urgent question for me, I'm just curious about why the following code does what it does. I wanted to have a border (or margin) around the visible page, and a nested DIV where "100% height and width" refers to the inside of that border (for further nesting).

<html>
  <body style='height:100%; width:100%; margin:0;'>
    <div style='border:5px solid green'>
      <div style='height:100%; width:100%;'>
      </div>
    </div>
  </body>
</html>

Obviously I (think to) know the box-model and what 100% means (here: the content box of the first DIV), and I know how to solve the problem using absolute positioning.

But what I don't understand: In Chromium as well as in Firefox, why do I get a vertical scrollbar but no horizontal one? It looks like the 100% height in the second DIV does not take into account the content box of the first DIV (respecting the 5px border), but rather the whole BODY content box. For 100% width however, things work as I thought they would - no horizontal scrollbar appears.

Can someone enlighten me? Is this historic browser behaviour?

EDIT after FredWilson's answer: If you开发者_开发知识库 give the BODY absolute dimensions 'height:100px; width:100px' the result stays the same: The vertical border extends the 100px height, but the horizontal border gets included. I try to reread the small print of the CSS spec but so far, I don't see any difference between height and width handling.

Left: BODY tag in Firebug; right: First DIV tag in Firebug.

CSS: 100%-height/width DIV inside a bordered div creates vertical, but not horizontal scrollbars

The easiest way to see how this is intentional is to open Chrome's Developer Tools and inspect the BODY and DIV tags. Note that chrome shows the BODY width and the div width to be 297px in my example. However, the BODY height is 275px and the DIV is 285px.

CSS: 100%-height/width DIV inside a bordered div creates vertical, but not horizontal scrollbars

What this tells us, and is no surprise, is that Chrome calculates the border setting and removes that space from somewhere else in the box. At the same time, Chrome respects the height without question which is why you get a vertical scrollbar.

I can't cite any official sources, but this has been my experience. Chrome & Firefox assume that width:100% is intended to only fill the viewport and so they adjust the box content appropriately.

However, since there are so many other variables to consider for height, and since height is a difficult thing to calculate in any sense, both browsers fall back to the exact CSS definitions.

Technically, both browsers should produce a horizontal scroll bar with your code. That they do not is most likely because the vendors did what they thought the developer probably intended in as many cases as possible.

Edit: TL;DR The width calculation relies on quirksmode to work in this case. Setting a strict doctype will create a new set of issues, such as needing to set html height and width to 100% and making sure that 100% height and width is on every DOM element in the chain. You will also have both scrollbars since the DOM will be respected.