CSS-부동 자식 DIV 높이를 부모 높이로 확장
페이지 구조는 다음과 같습니다.
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
이제 child-leftDIV에 더 많은 내용이 포함되므로 parentDIV의 높이는 자식 DIV에 따라 증가합니다.
그러나 문제는 child-right높이가 증가하지 않는다는 것입니다. 부모와 같은 높이를 어떻게 만들 수 있습니까?
위해 parent요소, 다음과 같은 속성을 추가 :
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
다음에 .child-right이 :
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
여기 에서 CSS 예제 와 동일한 높이 열에 대한 자세한 정보를 통해 더 자세한 결과를 찾을 수 있습니다 .
이 문제에 대한 일반적인 솔루션은 절대 위치 또는 자르기 부동을 사용하지만 열의 수 + 크기가 변경되면 광범위한 조정이 필요하고 "기본"열이 항상 가장 길어야한다는 점에서 까다 롭습니다. 대신 세 가지 강력한 솔루션 중 하나를 사용하는 것이 좋습니다.
display: flex: 가장 단순하고 최상의 솔루션 이며 매우 유연하지만 IE9 및 이전 버전에서는 지원되지 않습니다.table또는display: table: 매우 간단하고, 매우 호환 가능하며 (대부분의 모든 브라우저에서) 매우 유연합니다.display: inline-block; width:50%마이너스 마진 핵 : 매우 간단하지만 열 아래쪽 테두리는 약간 까다 롭습니다.
1. display:flex
이것은 매우 간단하고 좀 더 복잡하거나 세부적인 레이아웃에 쉽게 적용 할 수 있지만 flexbox는 IE10 이상에서만 지원됩니다 (다른 최신 브라우저 포함).
예 : http://output.jsbin.com/hetunujuma/1
관련 HTML :
<div class="parent"><div>column 1</div><div>column 2</div></div>
관련 CSS :
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox는 훨씬 더 많은 옵션을 지원하지만 위의 열만으로도 충분합니다!
2. <table>또는display: table
간단한 &이 작업을 수행하는 매우 호환 방법은 사용하는 것입니다 table- 당신이 오래된 IE의 지원이 필요한 경우 첫 번째 시도 권하고 싶습니다 . 열을 다루고 있습니다. divs + floats는 단순히 그렇게하는 가장 좋은 방법은 아닙니다 (CSS 제한을 해킹하기 위해 여러 수준의 중첩 된 div가 단순한 테이블을 사용하는 것보다 거의 "의미 적"이라는 사실은 말할 것도 없습니다). table요소 를 사용하지 않으려면 CSSdisplay: table (IE7 및 이전 버전에서는 지원되지 않음)를 고려하십시오.
예 : http://jsfiddle.net/emn13/7FFp3/
관련 HTML : (그러나<table>대신일반 사용을 고려하십시오)
<div class="parent"><div>column 1</div><div>column 2</div></div>
관련 CSS :
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
이 접근 방식은 overflow:hidden플로트를 사용 하는 것보다 훨씬 강력 합니다. 거의 모든 열을 추가 할 수 있습니다. 원하는 경우 자동 크기 조정 을 수행 할 수 있습니다 . 고대 브라우저와의 호환성을 유지합니다. float 솔루션의 요구 사항과 달리 어떤 열이 가장 긴지 미리 알 필요가 없습니다 . 높이가 잘 맞습니다.
KISS : 특별히 필요하지 않은 경우 플로트 핵을 사용하지 마십시오. IE7이 문제가 되더라도 유지 관리가 어렵고 유연성이 떨어지는 트릭 CSS 솔루션에서 의미 열이있는 일반 테이블을 계속 선택합니다.
그건 그렇고, 레이아웃이 반응 형이어야하는 경우 (예 : 작은 휴대 전화의 열 없음) @media쿼리를 사용하여 작은 화면 너비의 일반 블록 레이아웃으로 대체 할 수 있습니다. 이는 사용 여부 <table>또는 다른 display: table요소에 관계없이 작동합니다 .
3. display:inline block부정적인 마진 해킹.
또 다른 대안은을 사용하는 것 display:inline block입니다.
예 : http://jsbin.com/ovuqes/2/edit
관련 HTML : (div태그사이에 공백이 없으면중요합니다!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
관련 CSS :
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
이것은 약간 까다 롭고 음수 여백은 열의 "진정한"하단이 가려져 있음을 의미합니다. 이것은 결국 열이 잘려서 열의 하단에 상대적으로 아무것도 배치 할 수 없음을 의미합니다 overflow: hidden. 인라인 블록 외에도 플로트와 비슷한 효과를 얻을 수 있습니다.
TL; DR : IE9 이상을 무시할 수 있으면 flexbox를 사용 하십시오 . 그렇지 않으면 (css) 테이블을 시도하십시오. 이러한 옵션 중 어느 것도 효과가 없으면 부정적인 마진 해킹이 있지만 개발 중에 놓치기 쉬운 이상한 디스플레이 문제가 발생할 수 있으며 알아야 할 레이아웃 제한이 있습니다.
부모의 경우 :
display: flex;
어린이들을위한:
align-items: stretch;
접두사를 추가하고 캐니 우스를 확인하십시오.
나는 많은 답변을 찾았지만 아마도 나에게 가장 좋은 해결책은
.parent {
overflow: hidden;
}
.parent .floatLeft {
# your other styles
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
여기에서 다른 솔루션을 확인할 수 있습니다 http://css-tricks.com/fluid-width-equal-height-columns/
부모 div를 overflow: hidden
다음으로 설정하십시오. 자식 div에서 패딩 하단에 대해 많은 양을 설정할 수 있습니다. 예를 들어
padding-bottom: 5000px
다음 margin-bottom: -5000px
과 모든 자식 div의 부모의 높이가 될 것입니다.
물론 부모 div에 내용을 넣으려고하면 작동하지 않습니다 (다른 div 외부)
.parent{
border: 1px solid black;
overflow: hidden;
height: auto;
}
.child{
float: left;
padding-bottom: 1500px;
margin-bottom: -1500px;
}
.child1{
background: red;
padding-right: 10px;
}
.child2{
background: green;
padding-left: 10px;
}<div class="parent">
<div class="child1 child">
One line text in child1
</div>
<div class="child2 child">
Three line text in child2<br />
Three line text in child2<br />
Three line text in child2
</div>
</div>예 : http://jsfiddle.net/Tareqdhk/DAFEC/
부모님의 키가 있습니까? 부모님의 키를 이렇게 설정하면
div.parent { height: 300px };
그런 다음 아이를 이렇게 전체 높이까지 늘릴 수 있습니다.
div.child-right { height: 100% };
편집하다
다음은 JavaScript를 사용하여 수행하는 방법입니다.
CSS 테이블 표시는 다음에 이상적입니다.
.parent {
display: table;
width: 100%;
}
.parent > div {
display: table-cell;
}
.child-left {
background: powderblue;
}
.child-right {
background: papayawhip;
}<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>원래 답변 (열이 더 크다고 가정) :
부모의 키를 어린이의 키에 따라, 어린이의 키를 부모의 키에 따라 만들려고합니다. 계산하지 않습니다. CSS Faux 열이 가장 좋은 솔루션입니다. 이를 수행하는 방법은 여러 가지가 있습니다. 차라리 JavaScript를 사용하고 싶지 않습니다.
최근 jQuery를 사용하여 웹 사이트 에서이 작업을 수행했습니다. 이 코드는 가장 높은 div의 높이를 계산하고 다른 div를 동일한 높이로 설정합니다. 기술은 다음과 같습니다.
http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/
나는 height:100%작동 하지 않을 것이라고 생각 하므로 div 높이를 명시 적으로 모른다면 순수한 CSS 솔루션이 있다고 생각하지 않습니다.
나는 이것을 코멘트 섹션에 사용했다 :
.parent {
display: flex;
float: left;
border-top:2px solid black;
width:635px;
margin:10px 0px 0px 0px;
padding:0px 20px 0px 20px;
background-color: rgba(255,255,255,0.5);
}
.child-left {
align-items: stretch;
float: left;
width:135px;
padding:10px 10px 10px 0px;
height:inherit;
border-right:2px solid black;
}
.child-right {
align-items: stretch;
float: left;
width:468px;
padding:10px;
}<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>자식 오른쪽을 오른쪽으로 띄울 수 있지만이 경우 각 div의 너비를 정확하게 계산했습니다.
부트 스트랩을 알고 있다면 'flex'속성을 사용하여 쉽게 할 수 있습니다 .CSS 속성 아래에서 부모 div로 전달하면됩니다.
.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}
.homepageSection부모 div는 어디에 있습니까 ? 이제 HTML에 하위 div를 다음과 같이 추가하십시오.
<div class="abc col-md-6">
<div class="abc col-md-6">
여기서 abc는 내 자식 div입니다. 자식 div에 테두리를 지정하면 테두리에 관계없이 두 자식 div의 높이가 동일한 지 확인할 수 있습니다.
<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>
<div class="child-right floatLeft" style="height:100%">
</div>
</div>
아이디어를주기 위해 인라인 스타일을 사용했습니다.
인턴쉽 인터뷰에서이 깔끔한 트릭에 대해 배웠습니다. 원래 질문은 세 개의 열에서 각 상단 구성 요소의 높이가 사용 가능한 모든 내용을 표시하는 동일한 높이를 유지하는 방법입니다. 기본적으로 가능한 최대 높이를 렌더링하는 보이지 않는 자식 구성 요소를 만듭니다.
<div class="parent">
<div class="assert-height invisible">
<!-- content -->
</div>
<div class="shown">
<!-- content -->
</div>
</div>
참고 URL : https://stackoverflow.com/questions/4804581/css-expand-float-child-div-height-to-parents-height
'development' 카테고리의 다른 글
| ng-if와 ng-show / ng-hide의 차이점은 무엇입니까 (0) | 2020.02.19 |
|---|---|
| 스칼라의 사례 클래스와 클래스의 차이점은 무엇입니까? (0) | 2020.02.19 |
| 여러 테이블에서 SQL 쿼리 반환 데이터 (0) | 2020.02.19 |
| 레일에서 문자열과 텍스트의 차이점은 무엇입니까? (0) | 2020.02.19 |
| 객체가 목록인지 튜플인지 확인하는 방법 (문자열은 아님)? (0) | 2020.02.19 |