Home > Developer > Web Develop

CSS (13). How height fills full screen

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The demand source is a one-face question.

IE6 do not know!important statement, IE7, IE8, Firefox, Chrome and other browsers know, and in the strange mode, ie6/7/8 do not know!important statement, this is only one of the differences, there are many other differences. So, to write a cross-browser CSS, you have to use standard mode. It seems too absolute, hehe. Well, if you want to write cross-browser CSS, you'd better use standard mode.

There are two scenarios that can be found at the moment:

    • A. Using CSS percentages to achieve

    • B. Using CSS VH units (directly set up, very simple and fast)

      VH, which is the relative length unit in the CSS, represents the relative viewport height (Viewport).

First of all, the implementation of plan A.

Principle 1: The child element inherits the width height of the parent element by the specified width of the parent element, which sets the percentage.
Principle 2:web The browser considers the opening height of the browser window when calculating the effective width, and if no default value is set for the width, the browser automatically fills the horizontal width. But the height calculation method is different. the browser does not calculate the height of the content at all in other words. Browser:width:100%;height:auto;

1. In the weird mode, the body can be used as the root element. 2. In standard mode, HTML is the root node.

There <!DOCTYPE html> is a standard mode. No, it's weird mode.

Usually we recommend the standard mode. In other words, we need to sethtml{width100%;}

The standard pattern is implemented as follows (HTML header contains <!DOCTYPE html>)

As1

html,body {  height: 100%;}

Html

<div id="box" style="background-color: blue;width:100px;height:100%;"></div>
The quirks pattern is implemented as follows (HTML header does not contain <!DOCTYPE html>)

As1

body {  height: 100%;}

Html

<div id="box" style="background-color: blue;width:100px;height:100%;"></div>
The next thing to say about Plan B is very simple. You can set VH directly.

This method requires more than IE9.

Principle: VH is equivalent to the height of the window (full height is 100VH). VW is equivalent to the width of the window (Manquan is 100VW). The viewable area within the browser.window.innerWidth

Zhang Xin Asahi Big Guy Blog

Full height implementation is as follows 
<div id="box" style="background-color: blue;height:100vh;"></div>

CSS (13). How height fills full screen

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More