CSS-동일한 높이 열?

CSS-동일한 높이 열?

---

CSS에서 다음과 같이 할 수 있습니다.

하지만 다음과 같이 변경하는 방법을 모르겠습니다.

---

CSS로 가능합니까?

그렇다면 높이를 명시 적으로 지정하지 않고 어떻게 할 수 있습니까 (콘텐츠가 커지도록 함)?

---

Flexbox

2013 년 말에이 글을 읽으신다면 Flexbox를 마음대로 사용할 수 있습니다. 이 레이아웃 가정 :

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

flexbox를 사용하면 동일한 높이 열이 하나의 선언 일뿐입니다.

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

.col {
    flex: 1; /* additionally, equal width */
}

브라우저 지원 : http://caniuse.com/flexbox ; 데모 : http://jsfiddle.net/7L7rS/

테이블 레이아웃

여전히 IE 8 또는 9를 지원해야하는 경우 테이블 레이아웃을 사용해야합니다.

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 33.33%; /* depends on the number of columns */
}

데모 : http://jsfiddle.net/UT7ZD/

---

예.

다음은 기사에서 사용하는 완성 된 CSS입니다. 저자는이 작업을 수행하는 데 필요한 단계를 단계별로 진행 하므로 전체 기사를 읽을 가치가 있습니다.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

이것이 유일한 방법은 아니지만 아마 내가 본 것 중 가장 우아한 방법 일 것입니다.

이러한 방식으로 완전히 완료된 또 다른 사이트가 있습니다 . 소스를 보면 그들이 어떻게했는지 알 수 있습니다.

---

보내기 overflow: hidden용기 대형 (평등)에 음의 마진 양의 패딩 컬럼. 이 방법에는 몇 가지 문제가 있습니다. 예를 들어 앵커 링크가 레이아웃 내에서 작동하지 않습니다.

마크 업

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

CSS

.container {
    overflow: hidden;
}

.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

결과

---

다음과 같이 CSS 테이블을 사용할 수 있습니다.

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div>
</div>

---

다음 JavaScript를 사용하여 쉽게 수행 할 수 있습니다.

$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
}); 

function getTallestHeight(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest) 
            tallest = height;
    }

    return tallest;
};

---

현대적인 방법 : CSS 그리드.

HTML :

<div class="container">
  <div class="element">{...}</div>
  <div class="element">{...}</div>
  <div class="element">{...}</div>
</div>

CSS :

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.element {
  border: 2px solid #000;
}

라이브 예제는 여기에 있습니다 .

repeat(auto-fit, minmax(200px, 1fr));부품은 열 너비를 설정합니다. 모든 열은 사용 가능한 공간의 1 분의 1을 차지하지만 200px보다 작을 수 없습니다. 200px 이하로 축소하는 대신 아래로 줄이므로 반응이 좋습니다. 또한 3 개가 아닌 원하는 수의 열을 가질 수 있습니다. 모두 잘 맞습니다.

정확히 3 개의 열이 필요한 경우 grid-template-columns: repeat(3, 1fr);대신 사용하십시오. 여전히 더 많은 요소를 가질 수 있으며 줄 바꿈하고 반응하지만 항상 3 열 레이아웃에 배치됩니다.

MDN 또는 css-tricks의 CSS 그리드에 대해 자세히 알아보십시오 .

깨끗하고, 읽기 쉽고, 유지 관리가 가능하고, 유연하며 사용하기 쉽습니다!

---

당신은 그것을 시도 ... 그것은 나와 호환되는 모든 브라우저에서 작동합니다 ...

<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
</div>

---

반응 형 답변 :

CSS flexbox는 귀엽지 만 오늘날 IE9 사용자를 줄이는 것은 약간 미친 짓입니다. 2015 년 8 월 1 일 현재의 속성 :

3 % IE9
2 % IE8

잘라 내면 5 % 깨진 페이지가 표시됩니까? 미친.

부트 스트랩이하는 방식으로 미디어 쿼리를 사용하면 IE8 로 돌아갑니다display: table/table-cell . 그래서:

http://jsfiddle.net/b9chris/bu6Lejw6/

HTML

<div class=box>
    <div class="col col1">Col 1<br/>Col 1</div>
    <div class="col col2">Col 2</div>
</div>

CSS

body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
}

div.col {
    padding: 10px;
}

div.col1 {
    background: #8ff;
}
div.col2 {
    background: #8f8;
}

@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    }
    div.col {
        display: table-cell;
        width: 50%;
    }
}

이 경우에는 jsfiddle 창이 매우 작은 경향이 있기 때문에 400px를 열과 수직 레이아웃 사이의 스위치로 사용했습니다. 창 크기에 혼란 스러우면 열이 페이지 아래에서 부분적으로 잘리지 않도록 열이 필요할 때 전체 높이로 늘어나는 등 열이 멋지게 재정렬되는 것을 볼 수 있습니다. 페이지의 이후 태그에 충돌하는 미친 패딩 / 마진 해킹이 없으며 늑대 방문자의 5 %를 던지지 않습니다.

---

Another option is to use a framework that has this solved. Bootstrap currently doesn't have an equal height option but Foundation by Zurb does, and you can see how it works here: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

Here's an example of how you'd use it:

<div class="row" data-equalizer>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
</div>

Basically they use javascript to check for the tallest element and make the others the same height.

So, if you want just css this would add more code, but if you are already using a framework then they have already solved this.

Happy coding.

---

Here is an example I just wrote in SASS with changeable column-gap and column amount (variables):

CSS:

.fauxer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.fauxer {
  overflow: hidden; }

.fauxer > div {
  display: table;
  border-spacing: 20px;
  margin: -20px auto -20px -20px;
  width: -webkit-calc(100% + 40px);
  width: -moz-calc(100% + 40px);
  width: calc(100% + 40px); }

.fauxer > div > div {
  display: table-row; }

.fauxer > div > div > div {
  display: table-cell;
  width: 20%;
  padding: 20px;
  border: thin solid #000; }

<div class="fauxer">
                <div>
                    <div>
                        <div>
                            Lorem column 1
                        </div>
                        <div>
                            Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, 
                            sed diam nonumy eirmod tempor invidunt ut labore et 
                            dolore magna aliquyam erat, sed diam voluptua.
                        </div>
                        <div>
                            Lorem column 3
                        </div>
                        <div>
                            Lorem column 4
                        </div>
                        <div>
                            Lorem column 5
                        </div>
                    </div>
                </div>
            </div>

Note: I only found the time to test it in some new browsers. Please test it well before you will use it :)

The editable example in SCSS you can get here: JSfiddle

참조 URL : https://stackoverflow.com/questions/2114757/css-equal-height-columns