뷰포트 경계선을 기준으로 CSS div 크기를 조정합니까?

일부 텍스트와 YouTube 동영상이 포함 된 div가 있습니다. CSS를 사용하여 회색 배경을 부여했습니다. 또한 상단에서 4.4em, 왼쪽에서 1 %로 위치를 설정하고 너비를 98 %로했습니다. div의 하단이 브라우저의 크기 나 확대/축소와 관계없이 하단에서 4.4cm가되게하고 싶습니다. 어떻게해야합니까? CSS를 사용할 수 있습니까, 아니면 Javascript가 필요합니까? Javascript 코드를 포함하는 답변을 주면 jQuery를 사용하지 마십시오.뷰포트 경계선을 기준으로 CSS div 크기를 조정합니까?

div { 
 
    position: absolute; 
 
    left: 1%; 
 
    width: 98%; 
 
    top: 4.4em; 
 
    background: grey; 
 
} 
 

 
body { 
 
    width: 100%; 
 
    color: white; 
 
}

EDIT: Here is my HTML: 
 

 
<div> 
 
    <h1>A Heading</h1> 
 
    YOUTUBE VIDEO HERE 
 
</div>

출처

2017-12-06 Unknown User

Welcome to StackOverflow! CSS에 대한 도움을 받으려면 CSS와 HTML을 모두 제공해야합니다. 우리는 문제없이 문제를 재현 할 수 없습니다. 질문을 업데이트하여 [** 최소, 완전하며 검증 가능한 예 **] (** http://stackoverflow.com/help/mcve)에 ** 관련 코드 **를 모두 표시하십시오. HTML이 서버 측에서 생성 된 경우 ** 출력 **을 게시하십시오. 자세한 내용은 [** 좋은 질문을하는 방법 **]에 대한 도움말 (http://stackoverflow.com/help/how-to-ask)을 참조하고 [** 사이트 둘러보기 **] (http://stackoverflow.com/tour) :) –

'top : 4.4em; 하단 : 4.4em; 왼쪽 : 1 %; right : 1 %' –

최소한의 예제만으로는 충분하지 않습니다. 그런데'em '은 글꼴 크기입니다. 뷰포트의 크기에 따라 높이를 계산하려면'vh '와 같은 것을 사용하는 것이 좋습니다. 또는'padding' /'margin'을 사용하십시오. –

당신은 하단에있는 4.4em 격차를 simluate하는 투명 테두리를 사용할 수 있습니다 중 하나, 또는 당신이 "CALC()"CSS 기능 https://www.w3schools.com/cssref/func_calc.asp

예를 사용할 수 있습니다 :

height: calc(100vh - 4.4em);

출처

2017-12-06 22:49:17

8.8em이어야합니다. 그러나 사이트에서 작동하는지 테스트 할 수있는대로 답변을 수락합니다. –

그것은 작동합니다. 그래도 약간의 조정이 필요했습니다. 감사! –

뷰포트 경계선을 기준으로 CSS div 크기를 조정합니까?

답변

관련 문제