아이들이 한창일 때까지
나는 이와 비슷한 페이지 구조를 가지고 있습니다.
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
의 를 원합니다.div확장하다, 확장하다, 확장하다, 확장하다, 확장하다,heightn일 때div의height증가한다.
:width됩니다를 의.width재 CSS다에 바를 .div 스크롤 바가 페이지 레벨로 되어 있으면 좋겠습니다.현재 부모님 디바는 다음과 같이 설정되어 있습니다.overflow: auto;
이것에 대한 CSS를 도와주실 수 있나요?
부모님께 한 번 해보세요, 저한테는 효과가 있었어요.
overflow:auto;
업데이트:
또 하나의 효과적인 솔루션:
부모:
display: table;
자식:
display: table-row;
를 .max-content부모의 키에 맞추어
.parent{
height: max-content;
}
https://jsfiddle.net/FreeS/so4L83wu/5/
가를 더하다clear:both이 떠 할 때 열이 떠 있다고 가정할 수 있습니다.할 수 다. auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
젠스가 코멘트에서 말한 것처럼
대안적인 답은 어떻게 div를 그 내용물보다 크지 않게 만들 수 있을까요?… 그리고 display: inline-block을 설정할 것을 제안합니다.잘 어울렸습니다. – Jens Jun 2 5:41
이것은 모든 브라우저에서 훨씬 더 잘 작동합니다.
높이 속성을 설정하는 대신 min-height를 사용합니다.
더하다
clear:both;
상위 div의 cs에 추가하거나 상위 div의 하단에 clear를 수행하는 div를 추가합니다. 둘 다;
overflow:auto는 간단한 웹 레이아웃에 적합할 수 있지만 마이너스 마진 등을 사용하기 시작하는 요소를 엉망으로 만들 수 있기 때문에 이는 정답입니다.
이 답변의 지침에서 이를 파악할 수 없는 사람은 다음과 같습니다.
패딩 값을 0보다 크게 설정해 보십시오. 하위 디브에 마진-탑 또는 마진-바텀이 있으면 패딩으로 대체할 수 있습니다.
예를 들어 다음과 같은 경우
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
다음으로 대체하는 것이 더 나을 것입니다.
#parent
{
padding: 30px 0px 20px 0px;
}
청소 하는 것.div이런 상황에 딱 맞습니다그럼 그냥 부모님한테 수업을...예:
<div id="parent" class="clearfix">
으로.height: auto또는 사용하기min-height부모 요소에서 작동합니다. 패딩이나 할 수 바를 다를 수 .box-sizing: border-boxd에 overflow: hidden모체에. 으로 인해 하는 가로 width: 100vwwidth:100%.
이게 당신이 원하는 대로 됩니까?
.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
우리가 시작하는 곳
여기 보일러판 HTML과 CSS가 있습니다.예를 들어, 두 개의 부유한 자식 요소를 가진 부모 요소가 있습니다.
/* The CSS you're starting with may look similar to this.
* This doesn't solve our problem yet, but we'll get there shortly.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>솔루션 #1: 오버플로: 자동
모든 최신 브라우저와 IE8로 돌아가는 Internet Explorer에서 작동하는 솔루션은 다음과 같습니다.overflow: auto부모 요소에 적용합니다.이는 스크롤 바가 추가된 IE7에서도 작동합니다.
/* Our Modified CSS.
* This is one way we can solve our problem.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
overflow: auto;
/*This is what we added!*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}솔루션 #2: Float Parent Container
모든 최신 브라우저에서 작동하는 또 다른 해결책은 상위 컨테이너를 띄우는 것입니다.
부모 디브를 이동하면 페이지 레이아웃의 다른 부분에 영향을 미칠 수 있기 때문에 항상 실용적이지는 않을 수 있습니다.
/* Modified CSS #2.
* Floating parent div.
*/
.containing-div {
background-color: #d2b48c;
display: block;
float: left;
/*Added*/
height: auto;
width: 100%;
/*Added*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}방법 #3: 부동 요소 아래에 Clearing Div 추가
/*
* CSS to Solution #3.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clear {
clear: both;
}<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
<div class="clear"></div>
</div>방법 #4: 상위 요소에 Clearing Div 추가 이 솔루션은 구형 브라우저와 신형 브라우저 모두에 상당히 방탄적입니다.
/*
* CSS to Solution #4.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clearfix {
clear: both;
}
.clearfix:after {
clear: both;
content: "";
display: table;
}<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/ 에서
2열 CSS 레이아웃을 찾고 계십니까?
그렇다면 설명서를 살펴보세요. 시작하기에는 꽤 간단합니다.
저는 절대 지정과 같은 포지셔닝 속성이 없는 하나의 열로 자식 디바를 확장하여 자식 디바의 내용을 중심으로 부모 디바를 확장했습니다.
예:
#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}
주열 div가 #wrap의 가장 깊은 자식 div인 것을 기준으로 할 때, 이것은 #wrap div의 깊이를 정의하고, 양쪽의 200px 패딩은 당신이 원하는 대로 절대적으로 위치한 div를 배치할 수 있도록 두 개의 큰 빈 열을 만듭니다.position:absolute를 사용하여 패딩 상단과 하단을 변경하여 헤더 디브와 바닥 디브를 배치할 수도 있습니다.
#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; }
아래의 코드가 저에게 효과가 있었습니다.
CSS
.parent{
overflow: auto;
}
html
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
<div id="clear" style="clear:both;"></div>
</div>
상위 컨테이너에 clearfix 솔루션을 적용해야 합니다.여기 수정 링크를 설명하는 멋진 기사가 있습니다.
사양에서 설명한 대로 작동합니다. 여기서 몇 가지 답변이 유효하며 다음 내용과 일치합니다.
블록 레벨 아이가 있는 경우, 높이는 여백이 없는 최상위 블록 레벨 아이 상자의 상단 테두리 가장자리와 여백이 없는 최하위 블록 레벨 아이 상자의 하단 테두리 가장자리 사이의 거리입니다.그러나 요소에 0이 아닌 상단 패딩 및/또는 상단 테두리가 있거나 루트 요소인 경우, 내용은 맨 위의 자식의 상단 여백 가장자리에서 시작됩니다. (첫 번째 경우는 요소의 상단 여백과 하단 여백이 맨 위와 맨 아래의 자식 여백과 함께 무너진다는 사실을 표현합니다.두 번째 경우에는 패딩/보더가 있으면 상단 여백이 무너지는 것을 방지합니다.)마찬가지로 요소에 0이 아닌 하단 패딩 및/또는 하단 테두리가 있는 경우 내용은 가장 하단 자식의 하단 여백 가장자리에서 끝납니다.
여기서: https://www.w3.org/TR/css3-box/ #blockwidth
#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
display:inline;
}나는 이 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;
언급URL : https://stackoverflow.com/questions/384145/expanding-a-parent-div-to-the-height-of-its-children
'programing' 카테고리의 다른 글
| 다음 클라우드가 도커에서 데이터베이스를 찾지 못하는 이유는 무엇입니까? (0) | 2023.10.15 |
|---|---|
| 이 핸들러 클래스는 정적이어야 합니다. 그렇지 않으면 누출이 발생할 수 있습니다.들어오는 처리기 (0) | 2023.10.15 |
| plsql %NOTFound (0) | 2023.10.15 |
| node.js에서 환경 변수를 설정하려면 어떻게 해야 합니까? (0) | 2023.10.15 |
| Woocommerce 체크아웃 페이지에서 "다른 주소로 발송" 체크박스를 기본적으로 선택 해제하는 방법 (0) | 2023.10.15 |