CSS에서 여러 div의 적응형 부동 높이를 위한 두 가지 방법

Css에는 여러 개의 div 부동 소수점이 나란히 있고 높이는 모두 적응형입니다(자동으로 증가)

3열 또는 2열 레이아웃에 Div + CSS를 사용할 때 두 열의 높이를 만듭니다. (또는 세 개의 열) 동일합니다. Table을 사용하면 구현하기 쉽지만 Div + CSS를 사용하는 것이 더 번거롭습니다. 일반적인 관행에 따르면 대부분 배경 이미지 채우기나 JS 스크립트를 사용하여 높이를 동일하게 만듭니다.

방법 1: 순수 CSS 솔루션("숨겨진 컨테이너 오버플로"와 "양성 내부 패치" 및 "음성 외부 패치"를 결합한 방법):

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

방법 2: js 솔루션(아이디어, 이 방법은 권장되지 않음):

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

위 내용은 CSS에서 여러 div의 적응형 부동 높이를 위한 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!