Two ways to adapt float height to multiple divs in CSS-CSS Tutorial-php.cn

Two ways to adapt float height to multiple divs in CSS

高洛峰

Release： 2017-03-27 17:29:53

Original

2445 people have browsed it

css Multiple div floats are arranged side by side, and the heights are all adaptive (auto-increasing)

When using Div + CSS for three-column or two-column layout, the height of the two columns (or three columns) must be the same. It is easy to implement using Table, but it is more troublesome to use Div + CSS. According to the general practice, most of them use background image filling or JS script to make the height the same.

Two ways to adapt float height to multiple divs in CSS

Method 1: Pure CSS solution (method combining "hidden container overflow" and "positive inner patch" and "negative outer patch"):

<style type="text/css">
<!--
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
-->
</style>
<div id="wrap" style="width:300px; background:#FFFF00;">
    <div id="sidebar_left" style="float:left;width:100px; height:1000px; background:#FF0000;">Left</div>
    <div id="sidebar_mid" style="float:left;width:100px; background:#666;">
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    </div>
    <div id="sidebar_right" style="float:right;width:100px; height:500px; background:#0000FF;">Right</div>
</div>

Copy after login

Method 2: js solution (idea, this method is not recommended):

<script>
var a=Math.max(document.getElementById("left").offsetHeight,document.getElementById("center").offsetHeight,document.getElementById("right").offsetHeight);  //获取3个div的最大高度
document.getElementById("left").style.height = a + "px";
document.getElementById("center").style.height = a + "px";
document.getElementById("right").style.height = a + "px";
</script>

Copy after login

The above is the detailed content of Two ways to adapt float height to multiple divs in CSS. For more information, please follow other related articles on the PHP Chinese website!