DIV 높이를 부모 DIV까지 늘리는 방법은 무엇입니까?

내 div가 세로로 늘어나는 데 약간 문제가 있습니다. 나는 많은 질문과 답변을 읽었지만 나에게는 효과가있는 해결책을 찾지 못했다.DIV 높이를 부모 DIV까지 늘리는 방법은 무엇입니까?

현재 사용 가능한 총 너비를 사용하려면 동일한 너비로 늘려야하는 두 div로 작업하고 있습니다. 각 div의 높이는 콘텐츠에 맞추거나 부모 높이까지 늘리는 쪽 중 큰 쪽을 선택해야합니다. 나는이 블록에 내용을 넣기 시작하면, 다른 내용보다 내용이 많으면 블럭 높이가 길어지지 않는다는 것을 알았다.

나는 clearfix와 높이 = 100 %로 놀려고했지만이 작업을 할 수 없었습니다. 둘 중 하나는 전문가가 수 CSS의 경우 http://jsfiddle.net/zg4NB/

여기

.grid-row { 
    display: block; 
    height: auto; 
    width: 100%; 
    margin-bottom: 1em; 
} 

.panel-quarter { 
    float: left; 
    width: 50%; 
} 

.panel-quarter:first-of-type { 
    padding-right: 1em; 
} 

.panel-content { 
    padding: 1em; 
} 

.grid-row:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.panel-quarter, 
.panel-quarter:after, 
.panel-quarter:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

가 JSFiddle입니다 :

<div class="grid-row"> 
    <div class="panel-quarter"> 
     <div class="panel-content bgnd-blue"> 
      <h2>First Block</h2> 
      <p>What if there is just a short amount of text here.</p> 
     </div> 
    </div> 
    <div class="panel-quarter"> 
     <div class="panel-content bgnd-green"> 
      <h2>Second Block</h2> 
      <p>And what if there is a really long section of text here that could go on for quite a few lines, especially more than the previous blocks text. This would make the heights somewhat mis-aligned it would seem.</p> 
     </div> 
    </div> 
</div>

그리고 여기 내 스타일이다 :

Currently: 
+---------+ +---------+  +---------+ +---------+ 
| Text | | Text B | OR | Text A | | Text | 
| A | +---------+  +---------+ | B | 
+---------+        +---------+ 

Instead of: 
+---------+ +---------+  +---------+ +---------+ 
| Text | | Text B | OR | Text A | | Text | 
| A | |   |  |   | | B | 
+---------+ +---------+  +---------+ +---------+

이

내 HTML 레이아웃입니다 나에게 내가 희망을 품거나 (완전히 희망을 갖고) 재 설계해야 할 곳을 보여 준다. iated. 난 당신이 flexBox 레이아웃을 사용하지 않는 이유를보다 CSS3를 사용하는 경우 내 머리를 완전히 CSS 주위 그러나 희망이 모든 레이아웃 물건이 단순화됩니다 그때까지 =)

출처

2013-03-22 Luke Baulch

바이올린은 분명히 (색상, 텍스트), Ascii Art도 놀랍습니다. 나는 +2 할 수 있기를 바랍니다. D –

얻을 거라고 확신 언젠가 해요. 그러면 문제가 쉽게 해결됩니다. 모질라에 대한 자세한 내용은

는

확인 : 대한 Using CSS flexible boxes

IE를 들어 당신이 갈 수 있습니다 : 당신은 JS의 라인과 그것을 달성 할 수 Grid layout

출처

2013-03-22 06:43:45

flexbox가 아닌 것 같습니다. IE에서 지원됩니다. 이상 적으로는 모든 주요 브라우저에서 지원되는 것을 사용하고 싶습니다. 나는 주변에서 놀았으며 이것은 IE가 준수하면 유망 해 보인다. –

@LukeBaulch - IE 용 그리드 레이아웃 확인 : http : //msdn.microsoft.com/en-ca/library/ie/hh673533 (v = vs.85) .aspx –

$('.panel-content').css('height', $('.grid-row').outerHeight());

http://jsfiddle.net/TAZhg/

출처

2013-03-22 06:58:48 Vassilis

DIV 높이를 부모 DIV까지 늘리는 방법은 무엇입니까?

답변

관련 문제