× 目录 [1]边框模拟 [2]负margin [3]table [4]absolute [5]flex [6]js
前面的话
等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现和js判断这四种真等高布局
伪等高
边框模拟
因为元素边框和元素高度始终是相同高度,用元素的边框颜色来伪装左右两个兄弟元素的背景色。然后将左右两个透明背景的元素使用absolute覆盖在中间元素的左右边框上,实现视觉上的等高效果
[注意]左右两侧元素的内容高度不能大于中间元素内容高度,否则无法撑开容器高度
<style>body,p{margin: 0;}.parent{ position: relative;}.center{ box-sizing:border-box; padding: 0 20px; background-clip: content-box; border-left: 210px solid lightblue; border-right: 310px solid lightgreen;}.left{ position: absolute; top: 0; left: 0; width: 200px;}.right{ position: absolute; top: 0; right: 0; width: 300px;}</style>
<div class="parent" style="background-color: lightgrey;"> <div class="left"> <p>left</p> </div> <div class="center" style="background-color: pink;"> <p>center</p> <p>center</p> </div> <div class="right"> <p>right</p> </div> </div>
负margin
因为背景是在padding区域显示的,设置一个大数值的padding-bottom,再设置相同数值的负的margin-bottom,使背景色铺满元素区域,又符合元素的盒模型的计算公式,实现视觉上的等高效果
[注意]如果页面中使用锚点跳转时,将会隐藏部分文字信息
[注意]如果页面中的背景图片定位到底部,将会看不到背景图片
<style>body,p{margin: 0;}.parent{ overflow: hidden;}.left,.centerWrap,.right{ float: left; width: 50%; padding-bottom: 9999px; margin-bottom: -9999px;}.center{ margin: 0 20px;}.left,.right{ width: 25%;}</style>
<div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> </div> <div class="centerWrap"> <div class="center" style="background-color: pink;"> <p>center</p> <p>center</p> </div> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> </div> </div>
真等高
table
table元素中的table-cell元素默认就是等高的
<style>body,p{margin: 0;}.parent{ display: table; width: 100%; table-layout: fixed;}.left,.centerWrap,.right{ display: table-cell;}.center{ margin: 0 20px;}</style>
<div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> </div> <div class="centerWrap"> <div class="center" style="background-color: pink;"> <p>center</p> <p>center</p> </div> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> </div> </div>
absolute
设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同,实现等高效果
<style>body,p{margin: 0;}.parent{ position: relative; height: 40px;}.left,.center,.right{ position: absolute; top: 0; bottom: 0;}.left{ left: 0; width: 100px;}.center{ left: 120px; right: 120px;}.right{ width: 100px; right: 0;}</style>
<div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> </div> <div class="center" style="background-color: pink;"> <p>center</p> <p>center</p> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> </div> </div>
flex
flex中的伸缩项目默认都拉伸为父元素的高度,也实现了等高效果
<style>body,p{margin: 0;}.parent{ display: flex;}.left,.center,.right{ flex: 1;}.center{ margin: 0 20px;}</style>
<div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> </div> <div class="center" style="background-color: pink;"> <p>center</p> <p>center</p> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> </div> </div>
js
当子元素高度不同时,进行js判断,增加较低子元素的padding-bottom,使得各个子元素实现等高效果
<style>body,p{margin: 0;}.parent{overflow: hidden;}.left,.center,.right{ float: left; width: 25%;} .center{ width: 50%; padding: 0 20px; background-clip: content-box; box-sizing: border-box;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> </div> <div class="center" style="background-color: pink;"> <p>center</p> <p>center</p> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> </div> </div>
<script>function getCSS(obj,style){ if(window.getComputedStyle){ return getComputedStyle(obj)[style]; } return obj.currentStyle[style];}var oParent = document.getElementById('parent');var oLeft = oParent.getElementsByTagName('div')[0];var oCenter = oParent.getElementsByTagName('div')[1];var oRight = oParent.getElementsByTagName('div')[2];function eqHeight(obj1,obj2){ var oDis = obj1.clientHeight - obj2.clientHeight; if(oDis > 0){ obj2.style.paddingBottom = parseFloat(getCSS(obj2,'padding-bottom')) + oDis + 'px'; }else{ obj1.style.paddingBottom = parseFloat(getCSS(obj1,'padding-bottom')) + Math.abs(oDis) + 'px'; }}eqHeight(oLeft,oCenter);eqHeight(oLeft,oRight);</script>

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

HTMLtagsareessentialforstructuringwebpages,enhancingaccessibility,SEO,andperformance.1)Theyareenclosedinanglebracketsandusedinpairstocreateahierarchicalstructure.2)SemantictagslikeandimproveuserexperienceandSEO.3)Creativetagslikeenabledynamicgraphics

Self-closingtagsinHTMLandXMLaretagsthatclosethemselveswithoutneedingaseparateclosingtag,simplifyingmarkupstructureandenhancingcodingefficiency.1)TheyareessentialinXMLforelementswithoutcontent,ensuringwell-formeddocuments.2)InHTML5,usageisflexiblebutr

To build a website with powerful functions and good user experience, HTML alone is not enough. The following technology is also required: JavaScript gives web page dynamic and interactiveness, and real-time changes are achieved by operating DOM. CSS is responsible for the style and layout of the web page to improve aesthetics and user experience. Modern frameworks and libraries such as React, Vue.js and Angular improve development efficiency and code organization structure.

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

WebStorm Mac version
Useful JavaScript development tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SublimeText3 Chinese version
Chinese version, very easy to use

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
