나머지 세로 공간 채우기-CSS 만
나는 작성해야 남아있는 수직 공간 의 #wrapper아래를 #first함께 #secondDIV.
유일한 CSS 솔루션이 필요합니다.
#wrapper {
width: 300px;
height: 100%;
}
#first {
width: 300px;
height: 200px;
background-color: #F5DEB3;
}
#second {
width: 300px;
height: 100%;
background-color: #9ACD32;
}<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>다음과 position:absolute;같이 #seconddiv 에서 이를 수행 할 수 있습니다 .
CSS :
#wrapper{
position:relative;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
편집 : 대체 솔루션
레이아웃과 해당 div에있는 콘텐츠에 따라 다음과 같이 더 적은 마크 업으로 훨씬 더 간단하게 만들 수 있습니다.
HTML :
<div id="wrapper">
<div id="first"></div>
</div>
CSS :
#wrapper {
height:100%;
width:300px;
background-color:#9ACD32;
}
#first {
background-color:#F5DEB3;
height: 200px;
}
다른 표시 값 대신 CSS Flexbox를 사용할 수 있습니다. Flexbox Layout (Flexible Box) 모듈은 크기를 알 수 없거나 동적 인 경우에도 컨테이너의 항목간에 공간을보다 효율적으로 배치, 정렬 및 배포하는 방법을 제공하는 것을 목표로합니다.
예
/* CONTAINER */
#wrapper
{
width:300px;
height:300px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/* SOME ITEM CHILD ELEMENTS */
#first
{
width:300px;
height: 200px;
background-color:#F5DEB3;
}
#second
{
width:300px;
background-color: #9ACD32;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, */
}
IE9 이하와 같은 이전 브라우저를 완벽하게 지원하려면 flexy 와 같은 polyfill을 사용해야합니다 .이 polyfill은 Flexbox 모델에 대한 지원을 활성화하지만 flexbox 모델의 2012 사양에만 해당됩니다.
최근에 Internet Explorer 8 및 9 또는 flexbox 모델을 지원하지 않는 이전 브라우저에서 도움이되는 다른 polyfill을 찾았습니다. 아직 시도하지 않았지만 여기 에 링크를 남겨 둡니다.
Chris Coyer 의 유용하고 완전한 Flexbox 모델 가이드를 여기에서 찾을 수 있습니다.
Flexbox 솔루션
참고 : 지원되는 브라우저에서 필요한 경우 가변 공급 업체 접두사를 추가 합니다 .
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
width: 300px;
height: 100%;
}
.first {
height: 50px;
}
.second {
flex-grow: 1;
}<div class="wrapper">
<div class="first" style="background:#b2efd8">First</div>
<div class="second" style="background:#80c7cd">Second</div>
</div>html이 다음과 같이 보이도록 몇 개의 div를 추가 할 수 있다면 :
<div id="wrapper">
<div id="first" class="row">
<div class="cell"></div>
</div>
<div id="second" class="row">
<div class="cell"></div>
</div>
</div>
다음 display:table속성 을 사용할 수 있습니다 .
#wrapper
{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
}
#first .cell
{
height:200px;
background-color:#F5DEB3;
}
#second .cell
{
background-color:#9ACD32;
}
래퍼 높이를 % 대신 vh로 변경해 보셨습니까?
#wrapper {
width:300px;
height:100vh;
}
예를 들어 그라데이션 배경으로 내 페이지를 채우고 싶을 때 잘 작동했습니다.
필요한 것은 약간의 개선 된 마크 업입니다. 두 번째를 첫 번째 안에 감싸면 아래에 렌더링됩니다.
<div id="wrapper">
<div id="first">
Here comes the first content
<div id="second">I will render below the first content</div>
</div>
</div>
메인 컨테이너 (상단, 하단, ....)의 높이를 고정하고 싶지 않다면이 CSS 파일 을 사용하여 나머지 공간을 사용하는 플렉스 컨테이너를 얻을 수 있습니다. 일!!! 스크롤바
<!DOCTYPE html>
<html >
<head>
<title>Flex Container</title>
<link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css">
<style>
.cont{
background-color: blue;
position: absolute;
height: 100%;
width: 100%;
}
.headerContainer {
background-color: green;
height: 100px;
width: 100%;
}
.mainContainer {
background-color: white;
width: 100%;
overflow: scroll
}
.footerContainer {
background-color: gray;
height: 100px;
width: 100%;
}
</style>
</head>
<body class="qx-flex-ready" style="height: 100%">
<div class="qx-vbox cont">
<div class="headerContainer">Cell 1: flex1</div>
<div class="mainContainer qx-flex3">
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
</div>
<div class="footerContainer" >Cell 3: flex1</div>
</div>
</body>
</html>
overflow : auto 옵션을 추가 할 수 있습니다 .
#second
{
width:300px;
height:100%;
overflow: auto;
background-color:#9ACD32;
}
자바 스크립트와 일부 클라이언트 측 계산이 필요합니다. http://jsfiddle.net/omegaiori/NERE8/2/
원하는 것을 효과적으로 달성하려면 jquery가 필요합니다. 이 기능은 매우 간단하지만 매우 효과적입니다.
(function () {
var heights = $("#wrapper").outerHeight(true);
var outerHeights = $("#first").outerHeight(true);
jQuery('#second').css('height', (heights - outerHeights) + "px");
})();
먼저 래퍼 높이를 감지합니다. 100 %로 설정되어있을 때마다 달라집니다 (착륙하는 화면에 따라 다름). 두 번째 단계 #second에서는 래퍼 높이에서 #firstdiv 높이를 뺀 적절한 높이를 div에 제공합니다 . 결과는 래퍼 div에 남아있는 사용 가능한 높이입니다.
참조 URL : https://stackoverflow.com/questions/23389098/fill-remaining-vertical-space-only-css
'IT이야기' 카테고리의 다른 글
| Spring @Value가 속성 파일의 값으로 확인되지 않을 경우 (0) | 2021.04.15 |
|---|---|
| Spring JUnit : autowired component에서 autowired component를 모의하는 방법 (0) | 2021.04.14 |
| 사설 git 서버 (SSH)를 사용하여 bower 패키지를 설치하는 방법 (0) | 2021.04.14 |
| Ansible로 디렉토리를 복사하는 것이 왜 그렇게 느린것일까..? (0) | 2021.04.14 |
| 로컬이 아닌 전역 적으로 pip 패키지를 설치 (0) | 2021.04.14 |