부모 div를 채우기 위해 div 높이를 늘리는 방법-CSS
아래와 같은 div가있는 페이지가 있습니다.
<div id="container">
<div id="A">
</div>
<div id="B">
<div id="B1"></div>
<div id="B2">B2</div>
</div>
<div id="C"></div>
<div id="D">
</div>
</div>
스타일링으로;
html, body {
margin: 0;
padding: 0;
border: 0;
}
#B, #C, #D {
position: absolute;
}
#A{
top: 0;
width: 100%;
height: 35px;
background-color: #99CC00;
}
#B {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#B2 {
margin-top: -35px;
bottom: 0;
background-color: #FFFFFF;
width: 200px;
overflow: scroll;
}
#B1 {
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#C {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #CCCCCC;
}
#D {
bottom: 0;
width: 100%;
height: 35px;
background-color: #3399FF;
}
B2전체 div B(녹색 테두리로 표시됨 )를 채우거나 늘리기 위해 div의 높이를 조정하고 바닥 글 div D를 교차하고 싶지 않습니다. 여기 작동하는 바이올린 데모 (업데이트 됨)가 있습니다. 어떻게 해결할 수 있습니까 ??
간단히 추가 height: 100%;에 #B2스타일. min-height필요하지 않아야합니다.
당신이 가지고 있다고 가정
<body>
<div id="root" />
</body>
일반 CSS를 사용하면 다음을 수행 할 수 있습니다. 작동하는 앱 https://github.com/onmyway133/Lyrics/blob/master/index.html보기
#root {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Flexbox를 사용하면 다음을 수행 할 수 있습니다.
html, body {
height: 100%
}
body {
display: flex;
align-items: stretch;
}
#root {
width: 100%
}
"min-height"속성
사용 패딩, 여백 및 테두리에주의하십시오. :)
html, body {
margin: 0;
padding: 0;
border: 0;
}
#B, #C, #D {
position: absolute;
}
#A{
top: 0;
width: 100%;
height: 35px;
background-color: #99CC00;
}
#B {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#B2 {
min-height:100%;
height:100%
margin-top: -35px;
bottom: 0;
background-color: red;
width: 200px;
overflow: scroll;
}
#B1 {
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#C {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #CCCCCC;
}
#D {
bottom: 0;
width: 100%;
height: 35px;
background-color: #3399FF;
}
스타일링 목적으로 B2를 사용하려면이 "해킹"을 시도해 볼 수 있습니다.
#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}
What suited my purpose was to create a div that was always bounded within the overall browser window by a fixed amount.
What worked, at least on firefox, was this
<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">
Insofar as the actual window is not forced into scrolling, the div preserves its boundaries to the window edge during all re-sizing.
Hope this saves someone some time.
B2 container position relative
Top position B2 + of remaining height
Height of B2 + height B1 or remaining height
I'd solve it with a javascript solution (jQUery) if the sizes can vary.
window.setTimeout(function () {
$(document).ready(function () {
var ResizeTarget = $('#B');
ResizeTarget.resize(function () {
var target = $('#B2');
target.css('height', ResizeTarget.height());
}).trigger('resize');
});
}, 500);
참고URL : https://stackoverflow.com/questions/5581799/how-to-stretch-div-height-to-fill-parent-div-css
'Programing' 카테고리의 다른 글
| 스프링 부트 @ResponseBody는 엔티티 ID를 직렬화하지 않습니다. (0) | 2020.09.16 |
|---|---|
| 저장소 패턴을 올바르게 사용하는 방법은 무엇입니까? (0) | 2020.09.15 |
| 직관 론적 유형 이론과 동등한 조합 논리는 무엇입니까? (0) | 2020.09.15 |
| DELETE 요청 본문에 대한 RESTful 대안 (0) | 2020.09.15 |
| Swift 이니셜 라이저가 수퍼 클래스에서 편의 이니셜 라이저를 호출 할 수없는 이유는 무엇입니까? (0) | 2020.09.15 |