배경 그라디언트가 전체 페이지 길이를 사용하지 않고 대신 반복됩니다.

Question

두 가지 문제가 있습니다.

첫 번째 문제는 내 배경 그라디언트가 페이지의 전체 길이를 차지하지 않는다는 것입니다. 대신 반복됩니다.

두 번째 문제는 제 옆으로 쓴 요소가 페이지의 전체 높이를 차지하지 않는다는 것입니다.

HTML과 CSS는 jsfiddle 볼 수 있습니다 : https://jsfiddle.net/mcsjz4j1/

.aside { 
width: 20%; 
float: left; 
color: black; 
background-color: #f7f7f7; 
height: 100%; 
} 

.list { 
width: 80%; 
float: right; 
color: white; 
height: 100%; 
} 

사전에 감사합니다.

Answer 1

이 시도 :

body { 
    /*height: 100%;*/ 
    width: 100%; 
} 

body { 
background: rgba(117,137,12,1); 
background: -moz-linear-gradient(top, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%); 
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(117,137,12,1)), color-stop(100%, rgba(164,179,87,1))); 
background: -webkit-linear-gradient(top, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%); 
background: -o-linear-gradient(top, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%); 
background: -ms-linear-gradient(top, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%); 
background: linear-gradient(to bottom, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#75890c', endColorstr='#a4b357', GradientType=0); 
background-repeat: no-repeat; 
} 

Answer 2

몸의 높이가 페이지의 전체 높이가 아닙니다. 이것은 이러한 CSS 라인으로 해결할 수 있습니다;

html{ 
    min-height: 100%; 
    position:relative; 
} 
body { 
    height: 100%; 
    width: 100%; 
} 

이렇게하면 배경을 완전히 덮지 않고 고정해야합니다.

제쳐두고, 절대 위 치를 지정하면 위쪽과 아래쪽을 모두 0으로하면 전체적으로 늘어납니다. 당신의 옆 CSS를 100 % :

.aside { 
    width: 20%; 
    /*margin-top: 4%;*/ 
    color: black; 
    background-color: #f7f7f7; 
    height: 100%; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

여기 https://jsfiddle.net/mcsjz4j1/21/

Answer 3

최소 높이 보내기 바이올린입니다.

.aside { 
    width: 20%; 
    /*margin-top: 4%;*/ 
    float: left; 
    color: black; 
    background-color: #f7f7f7; 
    min-height: 100%; 
} 

다른 문제의 경우,이

CSS3 gradient background set on body doesn't stretch but instead repeats?