CSS. 내용이 작고 몸체 높이가 100 % 인 경우, 바닥 글이 창의 아래쪽으로 밀려나는 상황에서 문서 높이와 일치하는 몸체 높이가

Question

이고, 팝업 매우 긴 메뉴 (몸체 길이가 길어질 때)가 높이를 증가시킵니다 바닥 글 다음에 여유 공간이 많이 생깁니다. 문제는이 시점에서 몸체 높이가 문서 높이보다 작다는 것입니다.

방법, 문서의 높이를 따라 몸의 높이를 강제로, CSS를 사용.

body, html { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.main { 
 
    border: 1px solid red; 
 
    height: 100%; 
 
} 
 
.ab { 
 
    left: 2em; 
 
    top: 2em; 
 
    right: 10em; 
 
    height: 150vw; 
 
    position: absolute; 
 
    border:1px solid yellow; 
 
}

<div class="main"> 
 
<div class="ab"></div> 
 
</div> 
 
<style> 
 

 
</style>

UPD

Example on jsfiddle

. 은 CSS 솔루션을 찾고 있습니다. 인해 .ab 소자 position: absolute; 데에

$("body").height($(document).height()); 

Answer 1

문제가있다 : JS (jQuery를)에서 은,이 같은 일부를 수행 할 수있다. 이로 인해 요소가 문서 플로우에서 제거되어 문서 높이가 변경되지 않습니다.

이 문제를 해결하기 위해 .ab에서 position: relative으로 변경하지만 일부 다른 HTML/레이아웃 변경이 필요할 수 있습니다.

function addElement() { 
 

 
    document.getElementById("ab").classList.add("show") 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    position: relative; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.main { 
 
    border: 1px solid red; 
 
    min-height: 100%; 
 
    box-sizing: border-box; 
 
} 
 
#ab { 
 
    box-sizing: border-box; 
 
    width: 90vw; 
 
    margin: 30px 5vw; 
 
    height: 150vw; 
 
    position: relative; 
 
    border:1px solid yellow; 
 
    display: none; 
 
} 
 

 
#ab.show { 
 
    display: block; 
 
}

<div class="main"> 
 
<div id="ab"></div> 
 
<button onclick="addElement()">Add tall element</button> 
 
</div> 
 
<style> 
 

 
</style>

Answer 2

이 주요 사업부의 높이를 증가 스크롤을 제거합니다이 시도하거나 다른 u는 오버 플로우 - y를 제공 할 수 있습니다 : 스크롤을

body, html { 
     height: 100%; 
     padding: 0; 
     margin: 0; 
    } 
    .main { 
    border: 1px solid red; 
    height:100%; 
    overflow-y:scroll; 
    position:relative; 
} 
.ab { 
    left: 2em; 
    top: 2em; 
    right: 10em; 
    height: 150vw; 
    position: absolute; 
    border:1px solid yellow; 
} 

<div class="main"> 
<div class="ab"></div> 
</div> 
<style> 

</style>