CSS 동일 높이 레이아웃의 6가지 방법 소개

다음 편집기에서는 CSS 동일 높이 레이아웃의 6가지 방법을 소개합니다. 편집자님이 꽤 좋다고 하셔서 지금 공유하고 참고용으로 드리고 싶습니다.

앞서 언급했듯이

동일 높이 레이아웃은 상위 요소에서 하위 요소의 높이가 동일한 레이아웃 방식을 말합니다. 동일 높이 레이아웃의 구현에는 의사 동일 높이와 실제 동일 높이가 포함됩니다. 가상 동일 높이는 높이가 동일한 것처럼 보이지만 실제 동일 높이는 실제 동일 높이입니다. 이 기사에서는 테두리 시뮬레이션, 네거티브 마진, 두 개의 의사 윤곽선, 테이블 구현, 절대 구현, 플렉스 구현 및 js를 소개하여 네 가지 실제 윤곽선 레이아웃을 결정합니다

의사 윤곽선

경계 시뮬레이션　

요소 테두리와 요소 높이가 항상 같기 때문입니다. , 요소의 테두리 색상을 사용하여 왼쪽 및 오른쪽 형제 요소의 배경색을 위장하는 데 사용됩니다. 그런 다음 절대값을 사용하여 중간 요소의 왼쪽 및 오른쪽 테두리에 투명한 배경으로 왼쪽 및 오른쪽 요소를 덮어 시각적으로 동일한 높이 효과를 얻습니다.

[참고] 왼쪽 및 오른쪽 요소의 높이 중간 요소의 높이보다 클 수 없습니다. 그렇지 않으면 개방형 컨테이너 높이를 지원할 수 없습니다.

CSS 코드콘텐츠 복사 클립보드로

<style>   
body,p{margin: 0;}   
.parent{   
    position: relative;   
}   
.center{   
    box-sizing:border-box;   
    padding: 0 20px;   
    background-clip: 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;   
}   
</style>

XML/HTML 코드클립보드에 콘텐츠 복사

<p class="parent" style="background-color: lightgrey;">
    <p class="left">
        <p>left</p>
    </p>
    <p class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </p>
    <p class="right">
        <p>right</p>
    </p>
</p>

음수 여백　　

패딩 영역에 배경이 표시되므로 설정 padding-bottom을 큰 값으로 설정한 후 같은 값을 설정합니다. 음수 margin-bottom은 배경색이 요소 영역을 덮도록 하며 요소의 박스 모델 시각적 동일한 높이 효과

[참고] 페이지에서

앵커 포인트 를 사용하여 점프하는 경우 텍스트 정보의 일부가 숨겨집니다.

[참고] 페이지의 배경 이미지가 하단에 위치하면 배경 이미지가 보이지 않습니다

CSS 코드 클립보드에 콘텐츠 복사rreee

XML/HTML 코드클립보드에 콘텐츠 복사

<style>   
body,p{margin: 0;}   
.parent{   
    overflow: hidden;   
}   
.left,.centerWrap,.rightright{   
    float: left;   
    width: 50%;   
    padding-bottom: 9999px;   
    margin-bottom: -9999px;   
}   
.center{   
    margin: 0 20px;   
}   
.left,.rightright{   
    width: 25%;   
}   
</style>

진정한 높이

table　

table 요소의 table-cell 요소는 기본적으로 동일한 높이로 설정됩니다.

CSS 코드 클립보드에 콘텐츠 복사

<p class="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="centerWrap">
        <p class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </p>
    </p>

    <p class="right" style="background-color: lightgreen;">
        <p>right</p>
    </p>
</p>

XML/HTML 코드클립보드에 콘텐츠 복사

<style>   
body,p{margin: 0;}   
.parent{   
    display: table;   
    width: 100%;   
    table-layout: fixed;   
}   
.left,.centerWrap,.rightright{   
    display: table-cell;   
}   
.center{   
    margin: 0 20px;   
}   
</style>

절대　

상단 설정: 0;bottom:0; 모든 하위 요소의 높이가 상위 요소의 높이와 동일하도록 하위 요소의 높이를 동일하게 유지

CSS 코드클립보드에 콘텐츠 복사

<p class="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="centerWrap">
        <p class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </p>
    </p>
    <p class="right" style="background-color: lightgreen;">
        <p>right</p>
    </p>
</p>

XML/HTML 코드클립보드에 콘텐츠 복사

<style>   
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;   
}   
</style>

flex 상위 요소의 높이만큼 높이 동일 효과도 구현됩니다.

CSS Code复制内容到剪贴板

<style>   
body,p{margin: 0;}   
.parent{   
    display: flex;   
}   
.left,.center,.rightright{   
    flex: 1;   
}   
.center{   
    margin: 0 20px;   
}   
</style>

XML/HTML Code复制内容到剪贴板

<p class="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </p>
    <p class="right" style="background-color: lightgreen;">
        <p>right</p>
    </p>
</p>

js　　

当子元素高度不同时，进行js判断，增加较低子元素的padding-bottom，使得各个子元素实现等高效果

CSS Code复制内容到剪贴板

<style>   
body,p{margin: 0;}   
.parent{overflow: hidden;}   
.left,.center,.rightright{   
    float: left;   
    width: 25%;   
}       
.center{   
    width: 50%;   
    padding: 0 20px;   
    background-clip: content-box;   
    box-sizing: border-box;   
}   
</style>

XML/HTML Code复制内容到剪贴板

<p class="parent" id="parent" style="background-color: lightgrey;">
    <p class="left" style="background-color: lightblue;">
        <p>left</p>
    </p>
    <p class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </p>
    <p class="right" style="background-color: lightgreen;">
        <p>right</p>
    </p>
</p>

JavaScript Code复制内容到剪贴板

<script>   
function getCSS(obj,style){   
    if(window.getComputedStyle){   
        return getComputedStyle(obj)[style];   
    }   
    return obj.currentStyle[style];   
}   
var oParent = document.getElementById(&#39;parent&#39;);   
var oLeft = oParent.getElementsByTagName(&#39;p&#39;)[0];   
var oCenter = oParent.getElementsByTagName(&#39;p&#39;)[1];   
var oRight = oParent.getElementsByTagName(&#39;p&#39;)[2];   
function eqHeight(obj1,obj2){   
    var oDis = obj1.clientHeight - obj2.clientHeight;   
    if(oDis > 0){   
        obj2.style.paddingBottom = parseFloat(getCSS(obj2,&#39;padding-bottom&#39;)) + oDis + &#39;px&#39;;   
    }else{   
        obj1.style.paddingBottom = parseFloat(getCSS(obj1,&#39;padding-bottom&#39;)) +  Math.abs(oDis) + &#39;px&#39;;   
    }   
}   
eqHeight(oLeft,oCenter);   
eqHeight(oLeft,oRight);   
</script>

以上这篇浅析CSS等高布局的6种方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

위 내용은 CSS 동일 높이 레이아웃의 6가지 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!