동적 높이가있는 부모를 채우기 위해 자식 div 높이를 늘립니다.

94

다음 바이올린에서 볼 수 있듯이 큰 div를 포함하도록 확장 div된 부모에 포함 된 두 개의 s div가 있습니다. 내 목표는 해당 자식 div의 높이를 동일하게 만드는 것입니다 .

http://fiddle.jshell.net/y9bM4/

css html

— 칼레드
소스

2

그 질문을 확인 : stackoverflow.com/questions/3049783/... , stackoverflow.com/questions/1575141/... , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@MikeHometchko CSS에는 많은 것이 있지만 CSS3에는 없습니다. 나도 그렇게 생각해.

— Mr_Green

1

@Mr_Green "CSS"와 CSS3의 근본적인 차이는 사소하기 때문에 문제가 보이지 않습니다. 이것은 죽음에 대한 질문과 답변을받은 매우 일반적인 문제입니다.

— Mike H.

1

@ MikeHometchko는 내 솔루션을 확인하십시오. 나는 아무도 전에 같은 대답을하지 않았다고 확신합니다.

— Mr_Green 2011

47

이 솔루션은 사용하는 것입니다 display: table-cell이러한 요소를 가져 인라인 대신 사용하는 display: inline-block나 float: left.

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

스 니펫 확장

작업 바이올린

— 그린 씨
소스

그래도 부모 요소가 테이블 셀인 경우에는 작동하지 않습니다.

— Tomáš Zato-Monica 복원

55

s display: flex를 늘리는 데 사용 div:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

— 트롱 램 판
소스

18

다음 CSS를 추가하십시오.

상위 div의 경우 :

style="display: flex;"

하위 div의 경우 :

style="align-items: stretch;"

— Ayan
소스

나는 stretch플렉스가 나를 위해 일할 수 있도록 아이들 을 추가해야 했습니다.

— BadHorsie 2019

4

https://www.youtube.com/watch?v=jV8B24rSN5o

디스플레이를 그리드로 사용할 수 있다고 생각합니다.

.parent { display: grid };

— 겔로 K
소스

원본 포스터의 동일한 코드를 사용하여 답변을 테스트 했습니까?

— Mark Stewart

작동하며 자식에 대한 CSS가 필요하지 않습니다. CSS 그리드 셀에는 auto기본적으로 행과 셀 이 있기 때문 입니다. display: -ms-grid자식이 한 명 뿐인 한 일부 flexbug를 피하기 위해 사용하면 실제로 IE에서 꽤 잘 작동합니다 .

— ShortFuse

-6

약간의 jQuery로 쉽게 할 수 있습니다.

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});

— 레본 마테 보시 안
소스

3

브라우저 창 크기가 조정되면이 문제가 발생하지만 CSS 창은 계속 작동합니다.

— SharpC 2016