높이가 아닌 이유 : 100 %가 div를 화면 높이로 확장합니까?
캐 러셀 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(뷰포트의 높이)- (예)를 사용할 수 있습니다
body {
height: 100vh;
}
설정 min-height도 가능합니다. (예)
body {
min-height: 100vh;
}
이러한 장치는 대부분의 최신 브라우저에서 지원되며 여기에서 지원을 찾을 수 있습니다 .
html요소의 높이를 100 %로 설정해야합니다 .
html { height:100%; }
또한, 당신이 사용하는 경우 position: absolute다음 height: 100%잘 작동합니다.
부모 요소로 시도해야합니다.
html, body, form, main {
height: 100%;
}
그러면 이것으로 충분합니다.
#s7 {
height: 100%;
}
예를 들어 왼쪽 열 (높이 100 %)과 내용 (높이 자동)을 원한다면 absolute :
#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>
이것은 이상적이지는 않지만 자바 스크립트로 항상 할 수 있습니다. 또는 제 경우에는 jQuery
<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
페이지 소스에서 다음을 볼 수 있습니다.
<div class="holder">
<div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">
태그에 높이 값을 입력하면 css 파일에 정의 된 높이 대신이 값이 사용됩니다.
div 안에 요소를 절대 배치하면 패딩 상단 및 하단을 50 %로 설정할 수 있습니다.
그래서 이런 식으로 :
#s7 {
position: relative;
width:100%;
padding: 50% 0;
margin:auto;
overflow: hidden;
z-index:1;
}
'development' 카테고리의 다른 글
| C ++로 열거 형 선언하기 (0) | 2020.04.02 |
|---|---|
| Vagrant는 .box 파일을 어디로 다운로드합니까? (0) | 2020.04.02 |
| 문자열을 JavaScript 함수 호출로 바꾸는 방법? (0) | 2020.04.02 |
| 이미지가 주어진 미로를 표현하고 해결하기 (0) | 2020.04.02 |
| JavaScript에서 "어설 션"이란 무엇입니까? (0) | 2020.04.02 |