다른 부모 div 아래에있는 열의 등 높이 설정 방법

Question

두 개의 서로 다른 상위 div 아래에 세 개의 열이 있습니다. 이 세 열의 높이를 같게 설정해야합니다. 내 경우에는

이슈는 다음과 같습니다

1. 3 열이 서로 다른 부모 div의 아래에, 디스플레이 사용할 수 없습니다 :
2. 가 col-의 탭 목록을 얻었다 테이블 및 테이블 셀 방법을 당신이 다른 탭

3. 나는 동일한 높이를 설정하는 JS을 시도

를 클릭하면 블록의 높이를 변경합니다 2,하지만 실패 :

a) JS는 col-2의 높이가 잘못되어 모든 섹션의 전체 높이를 계산하지만 활성화 된 것은 아닙니다.

b) JS는 고정 된 높이 값을 설정합니다. 창 크기를 축소하거나 col-2에서 다른 탭을 클릭하면 열 높이가 그에 따라 조정되지 않습니다. col 내부의 내용이 넘칠 수 있습니다.

HTML 코드 :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div> 
    <div class="left-wraper"> 
    <header>Head1</header> 
    <div class="col-1"> 
     <ul> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
     </ul> 
    </div> 
    <div class="col-2"> 
     <header>Topic 2</header> 
     <ul class="list-inline"> 
     <li><a href="#menu1">Menu 1</a></li> 
     <li><a href="#menu2">Menu 2</a></li> 
     <li><a href="#menu3">Menu 3</a></li> 
     </ul> 
     <section id="menu1" role="tabpanel"> 
     <p> 
      This is menu1<br> This is menu1<br> This is menu1<br> 
     </p> 
     </section> 
    </div> 
    </div> 
    <div class="right-wraper"> 
    <span>Head2</span> 
    <div class="col-3"> 
     <header>Topic 2</header> 
     <p> 
     sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text 
     </p> 
    </div> 
    </div> 
</div> 

CSS 코드 : 방법이 필요

.left-wraper { 
    width: 65%; 
    float: left; 
    padding: 8px; 
    background-color: #b3ffcb; 
} 

.right-wraper { 
    width: 28%; 
    float: left; 
    padding: 8px; 
    margin-left: 8px; 
    background-color: #ffccef; 
} 

.col-1 { 
    width: 30%; 
    float: left; 
    background-color: #e6ccfe; 
} 

.col-2 { 
    width: 70%; 
    float: left; 
    background-color: #ffeecd; 
} 

.col-3 { 
    width: 100%; 
    float: left; 
    background-color: #b3d9ef; 
} 

JSFiddle Demo

동적 블록에 대한 동일한 높이를 설정하려면 보라색, 노란색, 위의 데모에서 파란색. 로드시뿐만 아니라 다른 탭을 클릭하거나 화면의 크기를 조정할 때도 마찬가지입니다.

Answer 1

display:flex을보십시오 : 당신이 인 flexbox를 사용할 수처럼

.left-wraper { 
 
    display: flex; 
 
    width: 65%; 
 
    float: left; 
 
    padding: 27px 8px 8px; 
 
    background-color: #b3ffcb; 
 
} 
 

 
.right-wraper { 
 
    width: 28%; 
 
    float: left; 
 
    padding: 8px; 
 
    margin-left: 8px; 
 
    background-color: #ffccef; 
 
} 
 

 
.col-1 { 
 
    width: 30%; 
 
    float: left; 
 
    background-color: #e6ccfe; 
 
} 
 

 
.col-2 { 
 
    width: 70%; 
 
    float: left; 
 
    background-color: #ffeecd; 
 
} 
 

 
.col-3 { 
 
    width: 100%; 
 
    float: left; 
 
    background-color: #b3d9ef; 
 
} 
 
.outer_div { 
 
    display: flex; 
 
    } 
 
.left-wraper > header { 
 
    position: absolute; 
 
    top: 6px; 
 
    }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="outer_div"> 
 
    <div class="left-wraper"> 
 
    <header>Head1</header> 
 
    <div class="col-1"> 
 
     <ul> 
 
     <li>Coffee</li> 
 
     <li>Tea</li> 
 
     <li>Milk</li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-2"> 
 
     <header>Topic 2</header> 
 
     <ul class="list-inline"> 
 
     <li><a href="#menu1">Menu 1</a></li> 
 
     <li><a href="#munu2">Menu 2</a></li> 
 
     <li><a href="#">Menu 3</a></li> 
 
     </ul> 
 
     <section id="menu1" role="tabpanel"> 
 
     <p> 
 
      This is menu1<br> This is menu1<br> This is menu1<br> 
 
     </p> 
 
     </section> 
 
    </div> 
 
    </div> 
 
    <div class="right-wraper"> 
 
    <span>Head2</span> 
 
    <div class="col-3"> 
 
     <header>Topic 2</header> 
 
     <p> 
 
     sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

css 및 js에서 수행하는 작업을 분리하기 위해 유틸리티 클래스를 추가하는 것이 좋습니다. 나는 그것을 염두에두고 바이올린을 업데이트했습니다. 로드 및 클릭시 아래 코드가 적용됩니다. 피들 높이를 유지하거나 크기를 조정할 때 크기 조정을 위해 더 많은 맥락에서 볼 필요가 있습니다.

http://jsfiddle.net/d16b7932/

var $body = $('body'); 
findHeight('.findHeight'); 

function findHeight(el){ 
    var heightArr = []; 
    $(el).each(function(){ 
     heightArr.push($(this).outerHeight()); 
    }); 
    var tallest = Math.max.apply(null, heightArr); 
    $(el).css('height', tallest); 
    heightArr = []; 
} 

$body.on('click', 'div[class^="col-"]', function(){ 
    findHeight('.findHeight'); 
}); 

당신은 내가 문제의 요소에 findHeight의 클래스를 추가했습니다 알 수 있습니다. 원하는대로 변경할 수 있습니다. 그냥 js에서도 확인하십시오.

Answer 3

¿ 이와 비슷한 제품을 찾고 계십니까?

CSS .col-height { height: 100vh; }

HTML ... <div class="col-1 col-height"> ... <div class="col-2 col-height"> ... <div class="col-3 col-height">

Answer 4

이 보이는, layo에 도움이 편리한 모듈을 uts.여기서 볼 수 있듯이 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

당신은 기본적으로 왼쪽과 오른쪽 래퍼 '부모 DIV에 인 flexbox의 CSS를 추가하고 CSS를 일부 추가를 만들고 싶어 : 여기에 가이드에 대한 링크입니다

HTML :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div class='wrapper'> 
    <div class="left-wraper"> 
    <header class="header">Head1</header> 
    <div class='col-wrapper'> 
    <div class="col-1"> 
     <ul> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
     </ul> 
    </div> 
    <div class="col-2"> 
     <header>Topic 2</header> 
     <ul class="list-inline"> 
     <li><a href="#menu1">Menu 1</a></li> 
     <li><a href="#munu2">Menu 2</a></li> 
     <li><a href="#">Menu 3</a></li> 
     </ul> 
     <section id="menu1" role="tabpanel"> 
     <p> 
      This is menu1 
      <br> This is menu1 
      <br> This is menu1 
      <br> 
     </p> 
     </section> 
    </div> 
    </div> 
    </div> 
    <div class="right-wraper"> 
    <span>Head2</span> 
    <div class="col-3"> 
     <header>Topic 2</header> 
     <p> 
     sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     </p> 
    </div> 
    </div> 
</div> 

CSS :

.wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

.wrapper > * { 
    padding: 10px; 
    flex: 1 100%; 
} 

.col-wrapper { 
    flex: 5; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 

.left-wraper { 
    width: 65%; 
    float: left; 
    padding: 8px; 
    background-color: #b3ffcb; 
    flex-grow: 2; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: column wrap; 
    flex-flow: column wrap; 
} 

.right-wraper { 
    width: 28%; 
    float: left; 
    padding: 8px; 
    margin-left: 8px; 
    background-color: #ffccef; 
    flex-grow: 1; 
} 

.header { 
    width: 100%; 
} 

.col-1 { 
    width: 30%; 
    float: left; 
    background-color: #e6ccfe; 
    order: 1; 
} 

.col-2 { 
    width: 70%; 
    float: left; 
    background-color: #ffeecd; 
    flex: 3 0px; 
    order: 2; 
} 

.col-3 { 
    width: 100%; 
    float: left; 
    background-color: #b3d9ef; 
} 

http://jsfiddle.net/8ydoxj8m/

행운을 빌어 요!