남은 높이를 100 % 채우는 방법은 무엇입니까?
+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+
위와 같이 (1)의 내용은 동적으로 생성되는 페이지에서 증가 또는 감소 할 수 있으므로 알려지지 않았습니다. 위에 표시된 두 번째 div (2)는 나머지 공간을 채워야합니다.
다음은 내 HTML의 예입니다.
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>
css ...
#full{width: 300px; background-color: red;}
#someid{height: 100%;}
아니면이 방법이 잘못 되었습니까? 어떻게해야합니까? 제 데모 를보고 제 실수를 보여주세요.
div ( #header아래)를 추가 하여 내용을 1로 래핑 하면이 작업을 수행 할 수 있습니다 .
float
#header이면의 콘텐츠#someid가 강제로 그 주위로 흐르게됩니다.다음으로
#header의 너비를 100 %로 설정합니다. 이렇게하면 포함하는 div의 너비를 채우도록 확장됩니다#full. 이것은 더 이상 측면 주위로 흐를 공간이 없기 때문에#someid아래의 모든 콘텐츠 를 효과적으로 밀어 냅니다#header.마지막으로
#someid의 높이를 100 %로 설정하면와 같은 높이가됩니다#full.
HTML
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
CSS
html, body, #full, #someid {
height: 100%;
}
#header {
float: left;
width: 100%;
}
최신 정보
오늘날 최신 브라우저에서 flexbox가 잘 지원된다는 점을 언급 할 가치가 있다고 생각합니다. CSS는 변경 #full될 수 있으며 플렉스 컨테이너 가 되었으며 #someid플렉스 성장을보다 큰 값으로 설정해야합니다 0.
html, body, #full {
height: 100%;
}
#full {
display: flex;
flex-direction: column;
}
#someid {
flex-grow: 1;
}
div페이지에서 100 % 높이 를 얻으려면 div 위의 계층 구조에있는 각 개체도 100 %로 설정해야합니다. 예를 들면 :
html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }
귀하의 질문을 완전히 이해할 수는 없지만 이것이 귀하가 의미하는 바라고 가정합니다.
이것은 내가 일하고있는 예입니다.
<html style="height:100%">
<body style="height:100%">
<div style="height:100%; width: 300px;">
<div style="height:100%; background:blue;">
</div>
</div>
</body>
</html>
Style 내가 외부화하지 않은 CSS의 대체물 일뿐입니다.
이것은 테이블로 수행 할 수 있습니다.
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="0%"><td>
<div id="full">
<!--contents of 1 -->
</div>
</td></tr>
<tr><td>
<div id="someid">
<!--contents of 2 -->
</div>
</td></tr>
</table>
그런 다음 css를 적용하여 someid가 나머지 공간을 채우도록합니다.
#someid {
height: 100%;
}
Now, I can just hear the angry shouts from the crowd, "Oh noes, he's using tables! Feed him to the lions!" Please hear me out.
Unlike the accepted answer which accomplishes nothing aside from making the container div the full height of the page, this solution makes div #2 fill the remaining space as requested in the question. If you need that second div to fill the full height allotted to it, this is currently the only way to do it.
But feel free to prove me wrong, of course! CSS is always better.
html,
body {
height: 100%;
}
.parent {
display: flex;
flex-flow:column;
height: 100%;
background: white;
}
.child-top {
flex: 0 1 auto;
background: pink;
}
.child-bottom {
flex: 1 1 auto;
background: green;
} <div class="parent">
<div class="child-top">
This child has just a bit of content
</div>
<div class="child-bottom">
And this one fills the rest
</div>
</div>I know this is a late entry but even in 2016 I am surprised by the complete lack of IE support for flex (currently 11 is the only one to support it and its majorly buggy at that http://caniuse.com/#feat=flexbox) which from a business perspective is not great! So I think until IE is shut down the best solution and most cross-browser friendly one surely must be a JS/Jquery one?
Most sites already use Jquery and a very simple example (for my code) is:
$('#auto_height_item').height($(window).height() - $('#header').height());
You can obviously replace window and header and let the basic math do the work. Personally I'm still not convinced about flex yet...
I added this for pages that were too short.
html:
<section id="secondary-foot"></section>
css:
section#secondary-foot {
height: 100%;
background-color: #000000;
position: fixed;
width: 100%;
}
Create a div, which contains both divs (full and someid) and set the height of that div to the following:
height: 100vh;
The height of the containing divs (full and someid) should be set to "auto". That's all.
I know this is an old question, but nowadays there is a super easy form to do that, which is CCS Grid, so let me put the divs as example:
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
then the CSS code:
.full{
width:/*the width you need*/;
height:/*the height you need*/;
display:grid;
grid-template-rows: minmax(100px,auto) 1fr;
}
And that's it, the second row, scilicet, the someide, will take the rest of the height because of the property 1fr, and the first div will have a min of 100px and a max of whatever it requires.
I must say CSS has advanced a lot to make easier programmers lives.
참고URL : https://stackoverflow.com/questions/15376558/how-to-fill-100-of-remaining-height
'Programing' 카테고리의 다른 글
| CMake에서 일반 컴파일 플래그를 설정하는 최신 방법은 무엇입니까? (0) | 2020.10.20 |
|---|---|
| 파이썬에서 PHP의 print_r ()에 해당하는 것은 무엇입니까? (0) | 2020.10.20 |
| 같은 클래스에있는 다른 개체의 개인 필드에 액세스 (0) | 2020.10.20 |
| 클로저를 Swift 3로 업데이트-@escaping (0) | 2020.10.20 |
| 프로덕션 환경에서 디버그 기호 (pdb 파일)를 배포하면 어떤 위험이 있습니까? (0) | 2020.10.20 |