HTML CSS 선형 그래디언트가 뷰포트보다 높이를 커버 할 수 없습니다.

저는 웹 개발의 초보자입니다. 내 사전이 프로그래머 표준이 아니면 미리 사과드립니다.HTML CSS 선형 그래디언트가 뷰포트보다 높이를 커버 할 수 없습니다.

다음은 내가 성취하고자하는 것입니다. 1. 여러 개의 높이가있는 div가 있습니다. 이 예제에서 하나는 뷰포트의 높이를 가지며 다른 하나는 더 크다 (2000px). 2. 'body'요소는 모든 div 영역을 포함하는 선형 그라데이션 배경을 가진 래퍼 역할을합니다.

몇 가지 테두리를 사용하여 'body'크기가 'div'내부 크기에 따라 자동으로 달라지는 것을 볼 수 있습니다. 그러나 그라디언트는 뷰포트 높이에서 멈 춥니 다. 참고 : 평면 색상으로 전환하면 작동합니다. 여기

내 HTML이다 (매우 간단하지만 요점은 여전히 유효) :

html { 
 
    font-family: 'Exo 2', sans-serif; 
 
    font-size: medium; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    background: linear-gradient(to bottom, rgba(192, 196, 203, 1), rgba(42, 43, 44, 1)); 
 
    background-repeat: no-repeat; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 5px solid gold; 
 
    /*just for visualizing area*/ 
 
} 
 
#box1 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    /*viewport height, something I recently tried as an attempt to solve the problem*/ 
 
    border: 5px solid red; 
 
    /*just for visualizing area*/ 
 
} 
 
#box2 { 
 
    width: 100%; 
 
    height: 2000px; 
 
    border: 5px solid red; 
 
    /*just for visualizing area*/ 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="Style/mystyle.css"> 
 
</head> 
 

 
<body> 
 
    <div id="box1"></div> 
 
    <div id='box2'></div> 
 
</body> 
 
</html>

출처

2014-01-30 orangeBlues