在前端开发人员之间有1个广泛存在的难题，怎样让1个div的高宽比全自动拓宽到访问对话框100%的高宽比。有1些不一样的方式能够完成，可是，我想出了1个我本人较为喜爱的方式。今日，我将于你共享1下。
我对你是不上解的，但我尝试弄搞清楚怎样让我的合理布局竖直拉伸到网页页面的100％高宽比，这样1个令我消沉的难题。我想让div构造全自动拓宽，可是它便是不可以全自动拓宽，如今，为何他不可以这样那？今日我将与你1起共享这个处理方式。
比如说你有以下html编码文本文档
另外你有以下css款式文档
这就给了你这个示例文档。正如你所看到的，网页页面的content器皿不可以全自动拓宽到网页页面的全部高宽比。虽然大家给css款式文档加上了”height:100%”。为何那？
让我给你此外1种方法来思索HTML，基本上每个HTML文档都有1组器皿相互包括的。因而，在大家的网页页面里边，最先大家有1个<html>器皿，其次<body>器皿包括在<html>里，最终才是<div id=”content”></div>器皿包括在里边。当大家往任何1个器皿里边置放內容的情况下，这个器皿和包括此器皿的父器皿盒子都会全自动拓宽的，从而能容下这些新加上的內容。也便是说，当大家往<div id=”content”></div>器皿盒子加上文本內容的情况下，这个div器皿盒子是全自动拓宽的，包括这个div器皿的父器皿盒子（body与html）先后是全自动拓宽的。
当大家给<div id=”content”></div>器皿界定“height:100%”款式时，大家如今做的便是告知它让其高宽比拓宽到包括它的父器皿的全部高宽比。在这个事例里，这个div器皿被包括在<body>器皿里边，因此<div id=”content”></div>便是body的全部高宽比。好了，body器皿是怎样拓宽提高的那？它就像<div id=”content”></div>的高宽比1样，由于大家几乎沒有告知它怎样增高的。因此当大家给<div id=”content”></div>界定“height：100%”款式的情况下，大家仅仅告知了它自身。
处理此难题，我必须告知<body>器皿变的大1些儿，另外<html>器皿也会出現一样的难题，它应当与<body>1样大。因此以便处理这个难题（让<div id=”content”></div>器皿全自动拓宽到全部网页页面的高宽比）大家必须告知<html>和<body>器皿高宽比应为全部网页页面的高宽比。
假如大家改动大家的css文档，以下所示
便是这样，这里是大家如今的最后实际效果。这个content器皿如今早已能全自动拓宽到全部网页页面的高宽比了。
汉语原文：小窍门：css100%高宽比
英文原文：Quick Tip：CSS 100% Height
Copyright © 2002-2020 建站平台有哪些_如何建设网站_免费自助建站_如何建立一个网站_网站建站的 版权所有 （网站地图） 粤ICP备10235580号
