Menu
Is there any difference between the two or are they the same? I think they refer to the same thing but in different contexts, but I am not sure so I ask here.
547
The containing block created by the root element ( html ) is called the initial containing block . The rectangle of the initial containing block fills the dimensions of the viewport. The initial containing block is used if there is no other containing block present.
In CSS, vh stands for viewport height and vw for viewport width. As you can see, the first unit is based on the viewport height, and 1vh is equivalent to 1% of the viewport height. vw works the same, but for viewport width.
A simple way to solve this is to use the viewport percentage unit vh instead of %. One vh is defined as being equal to 1% of a viewport's height. As such, if you want to specify that something is 100% of the latter, use " height: 100vh ". Or if you want to make it half the height of the viewport, say " height: 50vh ".
The initial containing block and the viewport, while related to each other, are two distinct concepts.
The viewport generally refers to the viewable area of a browser window in which a page is rendered on screen. The initial containing block is the logical area within the page in which the root element and everything else is rendered.
The dimensions of the initial containing block are based on those of the viewport (see section 10.1), but when the content is no longer able to fit the viewport, the viewport is made scrollable so the user can continue to access the rest of the content. Additionally, the new vw, vh, vmin and vmax units are called viewport-percentage units, but they are also described as being relative to the size of the initial containing block.
Note that the definition of a viewport may vary depending on the device. For example, the viewport of Safari on iOS is very different from that of a desktop browser.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
