HTML/CSS:두 가지의 부동 div 같은 높이

StackOverflow https://stackoverflow.com/questions/1205159

  •  05-07-2019
  •  | 
  •  

문제

나는 작은 독특한 문제는 내가 현재 사용하여 해결하는 table, 아래를 참조하십시오.기본적으로 말하고,두 div 을 100%사용 가능한 폭하지만,많은 수직으로 공간을 필요로(는 정말 없는 분명 그림에서).두어야 한 모든 시간에 정확히 같은 높이와 작은 선,그들 사이로 표시됩니다.

alt text
(출처: pici.se)

이 모든 것은 매우 쉽게 사용 할 table, 나는 현재하고있다.그러나 나는 너무에 대한 예리한 솔루션으로,의미상으로 이것은 실제로 표입니다.

도움이 되었습니까?

해결책

많은 양의 바닥 패딩, 동일한 양의 하단 음수 여백을 적용하고 오버 플로우가 숨겨진 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 컨테이너의 내부 플로트를 제거하기 위해. 오버 플로우를 사용하면 숨겨진 오버 플로우를 사용하는 경우 모든 비 이리 브라우저의 플로트가 제거 된 다음 너비 또는 줌과 같은 Haslayout을 제공하기 위해 무언가를 추가하면 IE가 내부 플로트를 지우게됩니다.

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

이게 도움이 되길 바란다.

다른 팁

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 : 시간이 왔다고 생각한다면 display:flex, 체크 아웃 Flexbox Froggy.

이를 달성하려면 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.
}

JS와 함께 작동 할 수 있습니다.

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

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

이 기사는 목록에서 나온 것입니다 이 문제에 대해 잘 읽었습니다. 그것은 하나의 수직 타일 배경 이미지를 기준으로 "가짜 열"이라는 기술을 사용합니다. 열이 포함 된 요소 그것은 같은 길이 열의 환상을 만듭니다. 플로트 요소의 래퍼에 있기 때문에 가장 긴 요소만큼 길다.

At Appart 편집자 목록에는이 기사 에이 메모가 있습니다.

편집자의 메모 : 당시에는 우수하지만이 기사는 현대 모범 사례를 반영하지 않을 수 있습니다.

이 기술에는 액체 레이아웃과 잘 작동하지 않는 완전히 정적 인 폭 디자인이 필요합니다. 그러나 정적 폭 사이트의 경우 신뢰할 수있는 옵션입니다.

나는 비슷한 문제가 있었고 제 생각에 최선의 선택은 약간의 JavaScript 또는 jQuery를 사용하는 것입니다.

당신은 가장 높은 div 값을 얻고 다른 모든 div에 해당 값을 적용하여 원하는 div를 동일한 높이로 얻을 수 있습니다. 많은 DIV와 많은 솔루션이있는 경우 모든 DIV 중 어느 것이 가장 높는지를 찾아서 값을 사용하기 위해 Little Advance JS 코드를 작성하는 것이 좋습니다.

jQuery와 2 divs를 사용하면 매우 간단합니다. 여기 예제 코드가 있습니다.

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

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

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

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

또한 바닥의 더 명확한 div를 무너 뜨린 경우 IE 6에서도 작동합니다.편집하다: Natalie 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-height div 높이와 같은 값으로 텍스트를 포함하는 내부 div를 display: inline; line-height: 110%.

JavaScript를 사용하면 두 개의 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';
}

"왼쪽"과 "오른쪽"이 DIV 태그의 ID입니다.

CSS 속성을 사용하여-> 디스플레이 : 테이블 세포

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>

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>

JS를 사용하여 사용합니다 data-same-height="group_name" 당신이 동일하게 원하는 모든 요소에서 키.

The example: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();
});

내가 필요 유사한 작업을 수행하려면,여기에는 나의 구현합니다.개괄하는 목적으로,그것은 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%;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top