다음 코드가 있습니다.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
padding: 10px;
}
body {
position: relative;
}
#outer {
position: absolute;
top: 0;
left: 0;
border: 2px solid green;
padding: 5px;
max-width: 100%;
max-height: 100%;
}
#inner {
border: 2px solid red;
font-size: 5em;
overflow: auto;
height: 100%;
}<html>
<body>
<div id="outer">
<div id="inner">
This is a loooooooonnnng<br>text.<br> Spanning
<br>multiple<br>lines.
</div>
</div>
</body>
</html>브라우저 창 크기를 조정하면 내부 div가 외부 div 높이보다 더 많이 확장되는 것을 볼 수 있습니다. 그러나 height: 1000px;외부 div에서 높이를 지정 하면 내부 div의 크기가 외부 div의 높이에 맞게 조정됩니다. 왜 그렇게 행동합니까? max-height는 높이를 지정하지 않고 작동하지 않습니까?
max-height속성은 요소의 최대 높이를 설정한다. height속성 의 사용 된 값이에 지정된 값보다 커지는 것을 방지합니다 max-height.
max-height: 100%부모 컨테이너에서 사용 하면 생성 된 상자의 컨테이너 블록 높이에 대해 백분율이 계산됩니다. 포함하는 블록의 높이가 명시 적으로 지정되지 않고이 요소가 절대 위치가 아닌 경우 백분율 값은로 처리됩니다 none.
의
max-height경우 콘텐츠가 최대 높이보다 크면 오버플로됩니다.
자식 컨테이너가 항상 부모 컨테이너 안에 들어가도록하려면 CSS Flexbox를 사용 하거나 추가 overflow: auto하면 #outer해당 콘텐츠 상자에있는 콘텐츠의 100 %를 맞출 수 있습니다. overflow또는 Flexbox를 사용하지 않으면 자식 컨테이너의 콘텐츠가 최대 높이보다 커져서 #outer뷰포트 높이가 작을 때 맨 아래로 넘칩니다 .
제거 단계 height: 100%에서 선언 #inner부모 컨테이너와 인 flexbox을하는 동안은 display: flex추가하지 않고도 트릭을 할 것 같다 overflow: auto에 #outer.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
padding: 10px;
}
body {
position: relative;
}
#outer {
position: absolute;
top: 0;
left: 0;
border: 2px solid green;
padding: 5px;
max-width: 100%;
max-height: 100%;
display: flex;
}
#inner {
border: 2px solid red;
font-size: 5em;
overflow: auto;
}<html>
<body>
<div id="outer">
<div id="inner">
This is a loooooooonnnng<br>text.<br> Spanning
<br>multiple<br>lines.
</div>
</div>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다