두 개의 나란히 있는 div 요소를 동일한 높이로 유지하려면 어떻게 해야 합니까?

두 개의 나란히 있는 div 요소를 동일한 높이로 유지하려면 어떻게 해야 합니까?

저는 두 개의 div 요소를 나란히 가지고 있습니다.저는 그것들의 높이가 같았으면 좋겠고, 만약 그것들 중 하나가 사이즈가 맞으면 그대로 유지했으면 합니다.텍스트가 삽입되어 하나가 커지면 다른 하나가 높이에 맞게 커져야 합니다.하지만 저는 이것을 이해할 수 없습니다.아이디어 있어요?

<div style="overflow: hidden">
    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
    </div>

    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!
    </div>
</div>

플렉스박스

Flexbox를 사용하면 단일 선언이 됩니다.

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

이전 브라우저의 경우 접두사가 필요할 수 있습니다. 브라우저 지원을 참조하십시오.

이것은 많은 사람들이 직면한 흔한 문제이지만, 운 좋게도 그의 블로그에 있는 에드 엘리엇과 같은 똑똑한 사람들은 그들의 해결책을 온라인에 올렸습니다.

기본적으로 당신이 하는 일은 두 개의 div/column을 매우 높게 만드는 것입니다.padding-bottom: 100%그리고 그고브나 "리우저를속" 여그게서 "라생록도하" 사크용다 "각니고않합"를 사용하여 않다고 .margin-bottom: -100%그것은 에드 엘리엇이 그의 블로그에서 더 잘 설명하고 있으며, 여기에는 많은 예들도 포함되어 있습니다.

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

해결책도 있지 않은 입니다. "" "" "" "" "" "" "CSS"를 사용해야 . 당신은 사용하기 시작했습니다.<table> CSS 그 (또를 CSS 사여위조하용태)를 함)display:table*값), "여러 요소의 높이를 동일하게 유지"하는 기능이 구현된 유일한 장소이기 때문입니다.

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

이 기능은 Firefox, Chrome 및 Safari의 모든 버전, Opera의 최소 버전 8 및 IE의 버전 8에서 작동합니다.

jQuery 사용

jQuery를 사용하면 매우 간단한 한 줄 스크립트로 할 수 있습니다.

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

CSS 사용

이것은 조금 더 흥미롭습니다.이 기법을 가짜 기둥이라고 합니다.실제 높이를 동일하게 설정하지는 않지만 그래픽 요소를 설치하여 동일한 높이로 보이도록 합니다.

CSS Flexbox와 최소 높이를 사용하는 것이 나에게 도움이 되었습니다.

두 개의 디브가 들어 있는 용기가 있고 두 디브의 높이가 같다고 가정합니다.

용기에 '디스플레이: 플렉스'와 '얼라인 항목: 스트레치'를 설정할 수 있습니다.

그런 다음 아이에게 100%의 '최소 높이'를 부여합니다.

아래 코드 참조

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* optional */
  min-height: 100%;
}

<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>

저는 아무도 (매우 오래되었지만 신뢰할 수 있는) Absolute Columns 기술을 언급하지 않은 것에 놀랐습니다: http://24ways.org/2008/absolute-columns/

제 생각에는, 그것은 Faux Columns와 One True Layout의 기술 모두보다 훨씬 우수합니다.

일반적인 생각은 다음과 같은 요소가 있다는 것입니다.position: absolute;를 가진 가장 가까운 부모 요소에 대항하여 위치를 지정합니다.position: relative;그런 다음 두 가지를 모두 할당하여 100% 높이를 채우도록 열을 늘립니다.top: 0px;그리고.bottom: 0px;(또는 실제로 필요한 픽셀/백분율)다음은 예입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>

Jquery의 Equal Heights 플러그인을 사용하여 이 플러그인을 수행할 수 있으며, 이 플러그인은 모든 div를 다른 div와 정확히 동일한 높이로 만듭니다.만약 그들 중 하나가 성장하고 다른 하나도 성장할 것입니다.

여기 구현 예제

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

여기 링크가 있습니다.

http://www.cssnewbie.com/equalheights-jquery-plugin/

바로 이 답을 찾다가 이 스레드를 발견했습니다.나는 방금 작은 jQuery 기능을 만들었는데, 이것이 도움이 되길 바라며, 매력적으로 작동합니다.

자바스크립트

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>

가짜 열을 사용할 수 있습니다.

기본적으로 DIV가 포함된 DIV의 배경 이미지를 사용하여 두 개의 동일한 높이의 DIV를 시뮬레이션합니다.또한 이 기법을 사용하면 그림자, 둥근 모서리, 사용자 정의 테두리 또는 기타 펑키한 패턴을 용기에 추가할 수 있습니다.

하지만 고정 너비 상자에서만 작동합니다.

모든 브라우저에서 제대로 테스트되고 올바르게 작동합니다.

CSS 그리드 방식

이를 수행하는 현대적인 방법(또한 선언할 필요가 없습니다.<div class="row"></div>)는 -2는 CSS 그리드를 사용합니다.또한 항목 행/열 사이의 간격을 쉽게 제어할 수 있습니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}

<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>

이 질문은 6년 전에 던졌지만, 요즘에는 플렉스박스 레이아웃으로 간단하게 대답할 가치가 있습니다.

다음 CSS 아지게추됩니다면가하에 .<div>,그건 작동할 것이다.

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

처음 두 줄은 플렉스박스로 표시된다고 선언합니다.flex-direction: row브라우저에 자녀가 열에 표시될 것임을 알려줍니다.align-items: stretch모든 어린이 요소가 동일한 높이로 늘어나야 한다는 요구 사항을 충족합니다. 그 중 하나는 더 높아집니다.

저는 이것을 달성하기 위해 가짜 요소를 사용하는 것을 좋아합니다.내용의 배경으로 사용하여 공간을 채우도록 할 수 있습니다.

이러한 접근 방식을 사용하여 열, 테두리 등 사이의 여백을 설정할 수 있습니다.

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}

<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>

1단계: 부모 div의 스타일링을 다음으로 설정합니다.display: flex

2단계: 자녀의 divs 스타일링을 다음으로 설정합니다.flex: 1그리고.height:100%

설명: flex: 1설정할 것입니다.flex-grow컨테이너의 남은 공간을 모든 어린이에게 균등하게 분배하는 1.

여기에 작업 중인 jsfiddle 링크가 있습니다.

플렉스 및 부모-자녀 디브가 플렉스 내부에서 어떻게 동작하는지에 대한 자세한 내용을 알고 싶다면 이 링크를 방문하는 것을 추천합니다: css-tricks.

만약 당신이 괜찮다면 그 중 하나.div마스터가 되어 둘 다의 높이를 받아쓰기div다음이 있습니다.

피들

무슨 일이 있어도.div오른쪽은 높이에 맞춰 확장하거나 스퀴즈&슬립합니다.div왼쪽으로요.

둘다요.divs는 컨테이너의 직계 하위 항목이어야 하며 컨테이너 내에서 해당 너비를 지정해야 합니다.

관련 CSS:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}

피들

HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}

jQuery를 사용하면 쉽게 이를 달성할 수 있습니다.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

jQuery를 포함해야 합니다.

오랜 시간이 흘렀지만 어쨌든 저는 제 해결책을 공유합니다.이것은 jQuery 속임수입니다.

HTML

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

CSS

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

JQUERY

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>

위에서 언급한 거의 모든 방법을 시도해 보았지만 플렉스박스 솔루션은 Safari에서 제대로 작동하지 않고 그리드 레이아웃 방법은 이전 버전의 IE에서 제대로 작동하지 않습니다.

이 솔루션은 모든 화면에 적합하며 브라우저 간 호환성이 있습니다.

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

위의 방법은 셀 높이와 같으며 모바일 또는 태블릿과 같은 작은 화면의 경우,@media전술한 방법

저는 Pavlo가 설명한 훌륭한 Flexbox 솔루션에 추가하고 싶었습니다. 저의 경우, 두 개의 데이터 목록/열을 나란히 표시하고 싶습니다. 이 두 개의 데이터는 서로 약간의 간격을 두고 서로 연결되어 있으며, 이 두 개의 데이터를 포함하는 div 내부에 수평 중심으로 표시하고 싶었습니다.첫 번째(가장 왼쪽) 플렉스 내에 다른 div를 중첩하여 1div를 오른쪽으로 띄움으로써 원하는 것을 얻었습니다.모든 뷰포트 폭에서 일관된 성공을 거두기 위해 다른 방법을 찾을 수 없었습니다.

<div style="display: flex;">
    <div style="flex: 1; padding-right: 15px;">
        <div style="float: right">
            <!-- My Left-hand side list of stuff -->
        </div>
    </div>

    <div style="flex: 1; padding-left: 15px;">
        <!-- My Right-hand side list of stuff -->
    </div>
</div>

요소의 offset.top을 확인하여 동일한 행에 있는 모든 요소에 대해 동일한 높이를 설정하는 jQuery 플러그인입니다.따라서 jQuery 배열에 둘 이상의 행의 요소(다른 offset.top)가 포함된 경우 각 행의 높이는 해당 행의 최대 높이를 기준으로 구분됩니다.

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });

저도 같은 문제를 겪고 있었기 때문에 요즘 모든 웹 애플리케이션에 jquery가 포함되어 있기 때문에 jquery를 사용하여 이 작은 함수를 만들었습니다.

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

페이지 준비 이벤트에서 이 기능을 호출할 수 있습니다.

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

이것이 당신에게 효과가 있기를 바랍니다.

저는 최근에 이것을 접했고 해결책이 별로 마음에 들지 않아서 실험을 해보았습니다.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

제가 여기서 한 것은 높이를 최소 높이로 바꾸고 고정된 값을 준 것입니다.둘 중 하나가 크기를 조정하는 경우 다른 하나는 동일한 높이를 유지합니다.이것이 당신이 원하는 것인지 확실하지 않습니다.

언급URL : https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-div-elements-the-same-height