HTML / CSS : 두 개의 플로팅 div를 같은 높이로 만들기

106

현재를 사용하여 해결하는 약간의 독특한 문제가 table있습니다. 아래를 참조하십시오. 기본적으로 두 개의 div가 사용 가능한 너비의 100 %를 차지하도록하고 싶지만 필요한만큼의 수직 공간 만 차지하고 싶습니다 (사진에서 그렇게 분명하지 않음). 둘은 그림과 같이 항상 똑같은 높이를 가져야하며 그 사이에 약간의 선이 있어야합니다.

_{(출처 : pici.se )}

이것은 table제가 현재하고있는를 사용하여 매우 쉽게 할 수 있습니다. 그러나 의미 론적으로 이것은 실제로 테이블이 아니기 때문에 솔루션에 너무 열중하지 않습니다.

html css html-table

— 데 니즈 도간
소스

2

어 ... 사진은 어디 있지? 나는이에 대한 언급을 너무 늦었 것을 알고있다

— 아제이 쿨 카르 니에게

다음은 WebArchive.org의 이미지 링크입니다. https://web.archive.org/web/20120617031534/http://pici.se/pictures/qJRMtoLPv.png

— DidThis

160

많은 양의 하단 패딩, 동일한 양의 하단 음수 여백을 적용하고 오버플로가 숨겨진 div로 열을 둘러싸면 CSS에서 동일한 높이의 열을 얻을 수 있습니다. 텍스트를 세로로 중앙에 배치하는 것은 조금 더 까다 롭지 만이 방법이 도움이 될 것입니다.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

스 니펫 확장

언급 할 가치가 있다고 생각합니다. ~~streetpc의 이전 답변에는 잘못된 html이 있고 doctype은 XHTML이며 속성 주위에 작은 따옴표가 있습니다. 또한 주목할 가치가있는 것은~~clear컨테이너의 내부 수레를 지우기 위해 on으로 추가 요소가 필요하지 않습니다 . 오버플로 숨김을 사용하면 IE가 아닌 모든 브라우저에서 부동 소수점을 지운 다음 width 또는 zoom : 1과 같은 hasLayout을 제공하는 항목을 추가하면 IE가 내부 부동 소수점을 지 웁니다.

나는 모든 최신 브라우저 FF3 + Opera9 + Chrome Safari 3+ 및 IE6 / 7 / 8에서 이것을 테스트했습니다. 추악한 속임수처럼 보일지 모르지만 잘 작동하고 프로덕션에서 많이 사용합니다.

이게 도움이 되길 바란다.

— 나탈리 다우 네
소스

1

내가 준 코드는 W3C의 유효성 검사기에서 유효성을 검사합니다 (음, 일단 <title> 요소를 추가하면 요점이 아닙니다). 또한 사양은이 토론에 따라 작은 따옴표를 사용할 수 있습니다. sitepoint.com/forums/showthread.php?t=54273#6

— instanceof me

1

죄송합니다, 제 실수입니다. 위의 답변을 수정했습니다. 그러나 방법을 사용하면 오른쪽 열이 왼쪽보다 커지면 두 상자가 정확히 오른쪽 높이가 아니므로 빨간색이 아래를 통해 표시됩니다. 디자인에 따라 가짜 열 또는 아래쪽 여백과 패딩이있는이 방법을 선택합니다.

— Natalie Downe

2

실제로 Kevin C.가 그림자가 잘리는 것에 대해 제공 한 솔루션은 위쪽, 왼쪽 및 오른쪽 패딩에서 작동하지만 아래쪽에서는 작동하지 않습니다. 지금까지 해결책을 찾지 못했습니다.

— JeanMertz 2011

1

잘 했어 나탈리. @laarsk 예측할 수없는 높이는 정확히 이것이 무엇입니까? 데모보기 : jsfiddle.net/RT3MT/4 "긴"단락을 이동하여보기

— jpillora

1

이것은 내가 본 것 중 가장 추악한 CSS 해킹 중 하나이지만 두 팔을 벌려 포용 할 것입니다. 앞으로 나아가는 유일한 방법 인 것 같습니다

— Matt

98

그것은, 2012 년 + n은 그렇다면 IE6 / 7에 대한 당신이 더 이상 관리, display:table, display:table-row및 display:table-cell모든 현대적인 브라우저에서 작동 :

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

2016-06-17 업데이트 :에 대한 시간이되었다고 생각한다면 Flexbox Froggy를display:flex 확인하세요 .

— 드미트리 레스 코프
소스

30

이 답변이 대체되는 해는 언제 display: flex입니까?

— LandonSchropp 2013 년

12

아니요, 지금은 2014 년입니다 (;

— Francisco Presencia

9

:) 플렉스 : aaaaaaand 우리가 디스플레이에 대한 답변을 변경할 수 있습니다 올해 말까지 어쩌면 2015 년의

— MetalWeirdo

5

나는 여전히 1950 년대에 살고 있습니다.

— Jay

1

2016 년부터 안녕하세요! 우리는 지금 플렉스 사용할 수 있습니다

— 브렛 그렉 슨

20

이를 위해서는 flexbox를 사용해야합니다. IE8 및 IE9에서는 지원되지 않고 IE10에서는 -ms 접두사 만 사용되지만 다른 모든 브라우저에서는 지원됩니다. 공급 업체 접두사의 경우 autoprefixer 도 사용해야 합니다 .

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}

— 루카 스티브
소스

1

플렉스에 대한 문제는 열 주위에 래퍼가 필요하다는 것입니다. floats + display : table 기술을 사용하면 예를 들어 헤더와 여러 열을 가질 수 있으며 효과는 헤더에 영향을주지 않고 열에서 작동합니다.

— Stijn de Witt

10

js로 작업 할 수 있습니다.

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>

— Andi P. Trix
소스

1

이 질문은 이미 꽤 오래되었고 더 나은 솔루션 (JavaScript 필요 없음)이 이미 제공되었습니다.

— nirazul

1

나는 실제로이 솔루션을 좋아합니다. 재미 있고 CSS로 HTML을 조작 할 수있을뿐만 아니라 jquery의 도움으로도 할 수 있음을 보여줍니다

— csichar

6

이 솔루션은 열 높이가 변경되면 작동하지 않습니다. 열의 내용이 변경되면 발생할 수 있습니다. 이 기능은 콘텐츠 변경시 및 브라우저 크기 조정시 실행되어야합니다. CSS 접근 방식은 이러한 우려를 피할 수 있기 때문에 더 이상적입니다

— alexreardon

5

이것은 CSS의 고전적인 문제입니다. 실제로 이에 대한 해결책은 없습니다.

A List Apart의이 기사는 이 문제에 대한 좋은 읽기입니다. 동일한 길이의 열의 환상을 생성하는 열 을 포함하는 요소 에 세로로 바둑판 식으로 배열 된 배경 이미지 하나를 기반으로하는 "가짜 열"이라는 기술을 사용합니다 . 플로팅 요소의 래퍼에 있기 때문에 가장 긴 요소만큼 길다.

A List Apart 편집자는 기사에 다음과 같은 메모를합니다.

편집자의 메모 : 당분간은 훌륭하지만이 기사는 최신 모범 사례를 반영하지 않을 수 있습니다.

이 기술에는 오늘날 교차 장치 사이트에서 널리 사용되는 유동적 레이아웃 및 반응 형 디자인 기술과 잘 작동하지 않는 완전히 정적 인 너비 디자인이 필요합니다. 그러나 정적 너비 사이트의 경우 신뢰할 수있는 옵션입니다.

— 필립 레이 바르트
소스

감사합니다. 멋진 해킹 인 것 같습니다. 그러나 오른쪽 열에는 세로로 가운데에 텍스트가 있어야한다는 것을 잊었습니다. 가짜 칼럼이 이것을 할 수 없다고 믿는 것이 맞습니까?

— Deniz Dogan

4

나는 비슷한 문제가 있었고 내 생각에 최선의 선택은 자바 스크립트 또는 jquery를 약간 사용하는 것입니다.

가장 높은 div 값을 가져오고 해당 값을 다른 모든 div에 적용하여 원하는 div가 동일한 높이가되도록 할 수 있습니다. div가 많고 솔루션이 많은 경우 모든 div 중 어느 것이 가장 높은지 알아 내고 그 값을 사용하기 위해 약간의 고급 js 코드를 작성하는 것이 좋습니다.

jquery 및 2 div를 사용하면 매우 간단합니다. 다음은 예제 코드입니다.

$('.smaller-div').css('height',$('.higher-div').css('height'));

그리고 마지막으로 마지막 한 가지가 있습니다. 패딩 (상단 및 하단)이 동일해야합니다! 패딩이 더 큰 경우 패딩 차이를 제거해야합니다.

— Br 씨
소스

1

내가 아는 한 현재 CSS 구현을 사용하여이 작업을 수행 할 수 없습니다. 두 개의 열을 동일한 높이로 만들려면 JS가 필요합니다.

— 칼린 돈
소스

1

이것은 IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows)에서 저에게 효과적입니다.

하단의 명확한 div 주석을 제거하면 IE 6에서도 작동합니다. 편집 : 나탈리 Downe 말했듯이, 당신은 간단하게 추가 할 수 있습니다 width: 100%;에 #container대신.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

div가 고정 높이가 아닌 경우 오른쪽 div의 텍스트를 세로로 가운데 정렬하는 CSS 방법을 모릅니다. 그렇다면을 line-heightdiv 높이와 동일한 값으로 설정하고 텍스트가 포함 된 내부 div를 display: inline; line-height: 110%.

— 나의 인스턴스
소스

1

자바 스크립트를 사용하면 두 개의 div 태그를 같은 높이로 만들 수 있습니다. 더 작은 div는 아래 표시된 코드를 사용하여 가장 높은 div 태그와 같은 높이로 조정됩니다.

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

"left"와 "right"는 div 태그의 ID입니다.

— 퀸 톡스 303
소스

1

css 속성-> display : table-cell 사용

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}

<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

스 니펫 확장

0

JS를 사용 data-same-height="group_name"하여 동일한 높이 를 원하는 모든 요소에 사용 하십시오 .

예 : https://jsfiddle.net/eoom2b82/

코드:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});

— Wiliam
소스

0

비슷한 작업이 필요했습니다. 여기에 내 구현이 있습니다. 목적을 요약하면 2 개의 요소가 주어진 부모 컨테이너의 너비를 차지하고 높이는 필요한만큼만 높이도록하는 것입니다. 기본적으로 높이는 최대 콘텐츠의 최대 높이와 같지만 다른 컨테이너는 플러시됩니다.

HTML

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

CSS

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}

— 이 남자
소스

0

몇 년 전, float속성과 그 문제를 해결하는 데 사용 table방법은 사용 display: table;하고 display: table-row;와 display: table-cell;.

하지만 지금은 플렉스 속성, 당신은 코드의 3 개 라인을 해결할 수 : display: flex;및 flex-wrap: wrap;및flex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50%있는 flex우리에게 준 값 : flex-grow flex-shrink flex-basis각각. 개별적으로 입력하는 것을 방지하기 위해 flexbox의 비교적 새로운 단축키입니다. 나는 이것이 누군가를 돕기를 바랍니다.

— 푸 아드 부크 레딘
소스