높이가 작동하지 않는 이유: 100%는 화면 높이로 디브를 확장할 수 있습니다.
회전목마 DIV(s7)가 전체 화면 높이로 확장되기를 원합니다.저는 왜 그것이 성공하지 못하는지 전혀 모르겠습니다.페이지를 보려면 여기로 가시면 됩니다.
body {
height: 100%;
color: #FFF;
font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
background: #222 url('') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a>
<a class="next2" id="next2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
</a>
</div>
<div class="holder">
<tr>
<td>
<div id="s7">
{block:Posts}
<div id="posts">백분율 값이 키에 적합하도록 하려면 부모의 키를 결정해야 합니다.유일한 예외는 루트 요소입니다.<html>, 백분율 높이가 될 수도 있습니다.
그래서, 당신은 당신의 모든 요소에 높이를 부여했습니다. 단,<html>, 그래서 당신이 해야 할 일은 이것을 추가하는 것입니다.
html {
height: 100%;
}
코드도 잘 작동할 겁니다
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}<div id=fullheight>
Lorem Ipsum
</div>아무도 이것에 대해 언급하지 않았기 때문에..
현대적 접근 방식:
이 둘 다를 설정하는 대안으로서html/body에 대한 원소의 높이100%, 뷰포트 백분율 길이를 사용할 수도 있습니다.
5.1.2. 포트 백분율 길이 보기: 'vw', 'vh', 'vmin', 'vmax' 단위
뷰포트-백분율 길이는 초기 포함 블럭의 크기에 상대적입니다.초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.
이 경우 값을 사용할 수 있습니다.100vh(뷰포트 높이) - (example)
body {
height: 100vh;
}
설정 amin-height효과도 있습니다. (example)
body {
min-height: 100vh;
}
이러한 장치는 대부분의 최신 브라우저에서 지원됩니다. 지원 내용은 여기에서 확인할 수 있습니다.
또한 높이를 100%로 설정해야 합니다.html요소:
html { height:100%; }
또는 다음을 사용하는 경우position: absolute그리고나서height: 100%잘 될 겁니다
상위 요소를 사용해 보아야 합니다.
html, body, form, main {
height: 100%;
}
그러면 이 정도면 충분합니다.
#s7 {
height: 100%;
}
예를 들어 왼쪽 열(높이 100%)과 컨텐츠(높이 자동)를 원하는 경우 절대적으로 사용할 수 있습니다.
#left_column {
float:left;
position: absolute;
max-height:100%;
height:auto !important;
height: 100%;
overflow: hidden;
width : 180px; /* for example */
}
#left_column div {
height: 2000px;
}
#right_column {
float:left;
height:100%;
margin-left : 180px; /* left column's width */
}
html:
<div id="content">
<div id="left_column">
my navigation content
<div></div>
</div>
<div id="right_column">
my content
</div>
</div>
div 내부의 요소를 절대적으로 배치할 경우 패딩 상하의 비율을 50%로 설정할 수 있습니다.
그래서 이런 거죠.
#s7 {
position: relative;
width:100%;
padding: 50% 0;
margin:auto;
overflow: hidden;
z-index:1;
}
사용을 원하지 않는 사람들을 위한 또 다른 해결책이 있습니다.html, body, .blah { height: 100% }.
.app {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
.full-height {
height: 100%;
}
.test {
width: 10px;
background: red;
}<div class="app">
<div class="full-height test">
</div>
Scroll works too
</div>이것을 당신의 것에 사용하세요.css
html, body {
height: 100%;
}
모든 서브 클래스에서 100% 높이를 볼 수 있습니다.
페이지 소스에서 다음을 볼 수 있습니다.
<div class="holder">
<div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">
태그에 높이 값을 넣으면 css 파일에 정의된 높이 대신 이 값을 사용합니다.
이것은 이상적이지 않을 수 있지만 항상 자바스크립트로 할 수 있습니다.아니면 제 경우엔 jQuery.
<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
게임도 같이 해보세요.calc그리고.overflow기능들
.myClassName {
overflow: auto;
height: calc(100% - 1.5em);
}
언급URL : https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height
'programing' 카테고리의 다른 글
| NGINX가 임의로 작동을 중지하므로 수동 재시작이 필요합니다. (0) | 2023.10.09 |
|---|---|
| ASP.NET - Ajax.파라미터를 사용하여 양식 OnSuccess 콜백 시작 (0) | 2023.10.04 |
| CSS만 사용하여 divon을 다른 요소 위에 호버링합니다. (0) | 2023.10.04 |
| 조회 결과를 MySQL의 변수로 설정 (0) | 2023.10.04 |
| WordPress의 편집기에 관리 전용 하위 메뉴 링크를 표시합니다.오류가 발생합니다. (0) | 2023.10.04 |