Shulou(Shulou.com)06/03 Report--

This article introduces you what are the ways of high layout such as CSS, the content is very detailed, interested friends can use it for reference, I hope it can be helpful to you.

A contour layout is a layout in which child elements are of equal height in the parent element. The realization of contour layout includes pseudo contour and true contour, pseudo contour only looks equal to height, and true contour is real equal height. This article will introduce frame simulation, negative margin, two pseudo-contour layouts, and four true contour layouts: table implementation, absolute implementation, flex implementation and js judgment.

Pseudo contour

Frame simulation

Because the element border and the element height are always the same height, the border color of the element is used to disguise the background color of the left and right sibling elements. Then cover the left and right elements of the transparent background with absolute on the left and right borders of the middle elements to achieve a visual contour effect.

[note] the height of the elements on the left and right sides cannot be greater than the height of the middle elements, otherwise the height of the container cannot be opened.

CSS Code copies content to the clipboard

Body,p {margin: 0;} .parent {position: relative;} .center {box-sizing:border-box; padding: content-box; border-left: 210px solid lightblue; border-right: 310px solid lightgreen;} .left {position: absolute; top: 0; left: 0; width: 200px;} .rightright {position: absolute Top: 0; rightright: 0; width: 300px;}

XML/HTML Code copies content to the clipboard

Left

Center

Center

Right

Negative margin

Because the background is displayed in the padding area, set a padding-bottom with a large value, and then set a negative margin-bottom with the same value, so that the background color covers the area of the element and accords with the calculation formula of the box model of the element, so as to achieve the visual contour effect.

[note] if an anchor jump is used on the page, some text messages will be hidden

[note] if the background picture on the page is located at the bottom, the background picture will not be seen.

CSS Code copies content to the clipboard

Body,p {margin: 0;} .parent {overflow: hidden;} .left, .rightright {float: left; width: 50%; padding-bottom: 9999px; margin-bottom:-9999px;} .center {margin: 020px;} .left, .rightright {width: 25%;}

XML/HTML Code copies content to the clipboard

Left

Center

Center

Right

True equal height

Table

The table-cell element in the table element is equal by default

CSS Code copies content to the clipboard

Body,p {margin: 0;} .parent {display: table; width: 100%; table-layout: fixed;} .left, .centerWrap, .rightright {display: table-cell;} .center {margin: 020px;}

XML/HTML Code copies content to the clipboard

Left

Center

Center

Right

Absolute

Set the top:0;bottom:0; of the child element so that the height of all the child elements is the same as that of the parent element to achieve the same height effect.

CSS Code copies content to the clipboard

Body,p {margin: 0;} .parent {position: relative; height: 40px;} .left, .center, .rightright {position: absolute; top: 0; bottombottom: 0;} .left {left: 0; width: 100px;} .center {left: 120px; rightright: 120px;} .rightright {width: 100px; rightright: 0;}

XML/HTML Code copies content to the clipboard

Left

Center

Center

Right

Flex

The stretch items in flex are stretched to the height of the parent element by default, and the equal height effect is also achieved.

CSS Code copies content to the clipboard

Body,p {margin: 0;} .parent {display: flex;} .left, .center, .rightright {flex: 1;} .center {margin: 020px;}

XML/HTML Code copies content to the clipboard

Left

Center

Center

Right

Js

When the height of the child element is different, the js judgment is made, and the padding-bottom of the lower child element is increased, so that each child element can achieve equal effect.

CSS Code copies content to the clipboard

Body,p {margin: 0;} .parent {overflow: hidden;} .left, .center, .rightright {float: left; width: 25%;} .center {width: 50%; padding: 020px; background-clip: content-box; box-sizing: border-box;} XML/HTML Code copy content to the clipboard

Left

Center

Center

Right

JavaScript Code copies the content to the clipboard 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)

About the high layout of CSS and other ways to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.