부모 확장 아이들의 키까지
다음과 비슷한 페이지 구조가 있습니다.
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
부모가 내가 좋아하는 것 div에 확장 height내부 때 div의 height증가.
편집 :
한 가지 문제는 width자식 내용 중 하나가 width브라우저 창을 지나 확장되면 현재 CSS가 부모에 가로 스크롤 막대를 배치한다는 것 div입니다. 스크롤 막대가 페이지 수준에 있기를 원합니다. 현재 부모 div가overflow: auto;
CSS를 도와 주시겠습니까?
부모님을 위해 이것을 시도해보십시오.
overflow:auto;
최신 정보:
작동하는 또 하나의 솔루션 :
부모 :
display: table;
아동 :
display: table-row;
을 추가하십시오 clear:both. 열이 떠 있다고 가정합니다. 키가 부모로 지정된 방법에 따라 overflow : auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
Jens가 언급 한대로
다른 대답은 div를 내용보다 크지 않게 만드는 방법입니다. … display : inline-block 설정을 제안합니다. 어느 것이 나를 위해 잘 작동했습니다. – 5시 41 분 젠스 6 월 2 일
이것은 모든 브라우저에서 훨씬 잘 작동합니다.
max-content부모님의 키 를 제공하십시오 .
.parent{
height: max-content;
}
https://jsfiddle.net/FreeS/so4L83wu/5/
이 답변의 지침에서 이것을 이해할 수없는 사람들을 위해 :
패딩 값 을 0 이상 으로 설정하십시오. 자식 div에 margin-top 또는 margin-bottom이 있으면 패딩으로 바꿀 수 있습니다
예를 들어
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
다음과 같이 바꾸는 것이 좋습니다.
#parent
{
padding: 30px 0px 20px 0px;
}
자체 정리와 같은 것을 사용하는 것은 이와 같은 div상황에 적합 합니다 . 그런 다음 부모의 클래스를 사용하십시오 ...
<div id="parent" class="clearfix">
더하다
clear:both;
부모 div의 CSS에 또는 부모 div의 맨 아래에 다음을 지우는 div를 추가하십시오.
overflow : auto; 정답입니다. 간단한 웹 레이아웃에서는 작동하지만 음수 여백 등과 같은 요소를 사용하기 시작하는 요소가 엉망이됩니다.
2 열 CSS 레이아웃 을 찾고 있습니까?
그렇다면 지침을 살펴보십시오 . 시작하기에는 매우 간단합니다.
자식 div를 절대 지정과 같은 위치 지정 속성이없는 단일 열로 사용하여 자식 div의 내용을 확장하여 부모 div를 만들었습니다.
예:
#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}
#wrap의 가장 깊은 하위 div 인 maincolumn div를 기반으로 이것은 #wrap div의 깊이를 정의하고 양쪽에 200px 패딩은 두 개의 큰 빈 열을 생성하여 원하는대로 절대 위치 div를 배치 할 수 있습니다. position : absolute를 사용하여 패딩 상단 및 하단을 변경하여 머리글 div 및 바닥 글 div를 배치 할 수도 있습니다.
이것이 당신이 원하는 것을합니까?
.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
상위 컨테이너에 clearfix 솔루션을 적용해야합니다. 다음은 수정 링크를 설명하는 좋은 기사입니다.
#childRightCol 및 #childRightCol 내부의 콘텐츠가 왼쪽이나 오른쪽으로 떠 다니는 경우 CSS에 추가하십시오.
#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }
이것은 사양에 설명 된대로 작동합니다. 여기의 대답은 유효하며 다음과 일치합니다.
블록 수준 자식이있는 경우 높이는 가장 큰 블록 수준 자식 상자의 위쪽 테두리 가장자리와 가장자리가 접히지 않은 가장 아래쪽 블록 수준 자식 상자 사이의 거리입니다. 이를 통해 여백이 축소되지 않습니다. 그러나 요소에 0이 아닌 위쪽 패딩 및 / 또는 위쪽 테두리가 있거나 루트 요소 인 경우 내용은 최상위 자식의 위쪽 여백 가장자리에서 시작합니다. (첫 번째 경우는 요소의 위쪽과 아래쪽 여백이 최상위 자식과 가장 아래쪽 하위의 여백으로 축소되고 두 번째 경우 패딩 / 테두리가 있으면 위쪽 여백이 무너지는 것을 방지합니다.) 요소에 0이 아닌 아래쪽 패딩 및 / 또는 아래쪽 테두리가 있으면 내용이 가장 아래쪽 자식의 아래쪽 여백 가장자리에서 끝납니다.
여기에서 : https://www.w3.org/TR/css3-box/#blockwidth
아래 코드는 나를 위해 일했습니다.
CSS
.parent{
overflow: auto;
}
html
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
<div id="clear" style="clear:both;"></div>
</div>
이 CSS를 부모로 사용하고 작동합니다.
min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
#parent{
background-color:green;
height:auto;
width:300px;
overflow:hidden;
}
#childRightCol{
color:gray;
background-color:yellow;
margin:10px;
padding:10px;
}<div id="parent">
<div id="childRightCol">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
</p>
</div>
</div>overflow:hidden;CSS에서 속성 을 사용하여 관리하고 있습니다.
참고 URL : https://stackoverflow.com/questions/384145/expanding-a-parent-div-to-the-height-of-its-children
'IT' 카테고리의 다른 글
| 자식 디렉토리에없는 동안 자식 풀 (0) | 2020.03.21 |
|---|---|
| Android M-런타임 권한 확인-사용자가 "다시 묻지 않음"을 확인했는지 확인하는 방법은 무엇입니까? (0) | 2020.03.21 |
| 첫 번째 직계 자녀만을위한 CSS 선택기가 있습니까? (0) | 2020.03.21 |
| MySQL-문자열 길이로 데이터를 선택하는 방법 (0) | 2020.03.21 |
| Android 기기에서 데이터 / 데이터 폴더에 액세스하는 방법은 무엇입니까? (0) | 2020.03.21 |