Deux façons d'adapter la hauteur du flotteur à plusieurs divs en CSS

Css a plusieurs div flottants côte à côte, et les hauteurs sont toutes adaptatives (augmentent automatiquement)

Lorsque vous utilisez Div + CSS pour une mise en page à trois ou deux colonnes, définissez les hauteurs des deux colonnes (ou trois colonnes) pareil. Il est facile à implémenter en utilisant Table, mais il est plus difficile d'utiliser Div + CSS. Selon la pratique générale, la plupart d'entre eux utilisent le remplissage d'une image d'arrière-plan ou un script JS pour uniformiser la hauteur.

Méthode 1 : Solution CSS pure (méthode combinant "débordement de conteneur caché" et "patch interne positif" et "patch externe négatif") :

<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>

Méthode 2 : solution js (idée, cette méthode n'est pas recommandée) :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!