Maison > interface Web > tutoriel CSS > Deux façons d'adapter la hauteur du flotteur à plusieurs divs en CSS

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

高洛峰
Libérer: 2017-03-27 17:29:53
original
2472 Les gens l'ont consulté

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.

Deux façons dadapter la hauteur du flotteur à plusieurs divs en CSS

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal