답변:
다음은 동적 배경의 컨테이너로 div를 사용할 때 마침내 생각해 낸 솔루션입니다.
z-index백그라운드가 아닌 용도를 제거하십시오 .left하거나 제거하십시오 right.top하거나 제거하십시오 bottom.편집 1 : 아래의 CSS는 FF 및 Chrome에서 올바르게 표시되지 않아 편집되었습니다. position:relativeHTML 로 이동 하고 본문 height:100%대신을 (를) 설정했습니다 min-height:100%.
편집 2 : CSS에 추가 의견이 추가되었습니다. 위에 몇 가지 지침을 추가했습니다.
CSS :
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}HTML :
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>왜?
html{min-height:100%;position:relative;}이것이 없으면 클라우드 컨테이너 DIV가 HTML의 레이아웃 컨텍스트에서 제거됩니다. position: relativeDIV가 그려 질 때 DIV가 HTML 상자 bottom:0의 하단 을 참조 하도록 HTML 상자 안에 유지되도록합니다 . height:100%클라우드 컨테이너에서도 뷰포트가 아닌 HTML 태그의 높이를 참조하므로 사용할 수 있습니다 .
html그래도 요소 에서 높이뿐만 아니라 최소 높이를 사용해야한다는 것을 알았습니다 . 왜 그런 겁니까?
height은 '너는 키가 크다. 더 이상은 아닙니다. ' 뷰포트의 높이가됩니다. 뷰포트 나 키보다 크거나 같기를 원합니다. min-height이 잘한다.
<html>뷰포트에 대한 위치 지정과 뷰포트에 대한 위치 지정이 별개의 두 가지 라는 것을 클릭하지 않았습니다 . 감사합니다!
HTML5를 사용하는 가장 쉬운 방법은 간단하게하는 것 height: 100vh입니다. 여기서 'vh'는 브라우저 창의 뷰포트 높이를 나타냅니다. 브라우저 및 모바일 장치의 크기 조정에 응답합니다.
vw.
비슷한 문제가 있었고 해결책은 다음과 같습니다.
#cloud-container{
position:absolute;
top:0;
bottom:0;
}페이지 높이가 100 % 인 페이지 중심 div를 원했기 때문에 전체 솔루션은 다음과 같습니다.
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}부모 요소 (또는 단순히 'body')를 만들어야 할 수도 있습니다. position: relative;
cloud-container?
테이블을 사용하는 것은 간단합니다.
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>DIV가 소개되었을 때 사람들은 테이블을 두려워하여 가난한 DIV가 은유 적 망치가되었습니다.
절대 위치를 사용하십시오. 이것은 일반적으로 수동으로 물건을 배치하거나 플로팅 대화 상자가 필요한 위치 절대 값을 사용하는 데 사용되는 방법이 아닙니다. 창 또는 내용의 크기를 조정할 때 자동으로 늘어납니다. 표준 모드가 필요하지만 IE6 이상에서 작동한다고 생각합니다.
div를 ID 'thecontent'로 바꾸고 콘텐츠로 지정하십시오 (지정된 높이는 설명을 위해 실제 콘텐츠에 높이를 지정할 필요가 없습니다).
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>이것이 작동하는 방식은 외부 div가 탐색 모음의 참조 점으로 작동한다는 것입니다. 외부 div는 'content'div의 내용으로 확장됩니다. 탐색 모음은 절대 위치를 사용하여 상위 높이까지 확장됩니다. 가로 정렬의 경우 콘텐츠 div를 동일한 탐색 표시 줄 너비만큼 오프셋합니다.
CSS3 flex box 모델을 사용하면 훨씬 쉽게 만들 수 있지만 IE에서는 아직 사용할 수 없으며 자체 단점이 있습니다.
모달 팝업을 표시하기 전에 전체 웹 페이지를 덮고 싶습니다. CSS와 Javascript를 사용하여 많은 방법을 시도했지만 다음 해결책을 알아낼 때까지 그중 아무것도 도움이되지 않습니다. 그것은 나를 위해 작동합니다, 나는 그것이 당신도 도움이되기를 바랍니다.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>행운을 빕니다 ;-)
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>간단하게, 그냥 테이블 사업부에 싸서 ...
HTML :
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>CSS :
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>