Hintergrund Farbverlauf nicht vollständige Seitenlänge, sondern es wiederholt sich

Question

Ich habe zwei Probleme.

Das erste Problem ist, dass mein Hintergrund Farbverlauf nicht die gesamte Länge der Seite einnimmt. Stattdessen wiederholt es sich.

Das zweite Problem ist, dass mein side-Element nicht die gesamte Höhe der Seite einnimmt.

HTML und CSS können in jsfiddle eingesehen werden: 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%; 
} 

Vielen Dank im Voraus.

Answer 1

Versuchen Sie folgendes:

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

Höhe Ihr Körper ist nicht die volle Höhe der Seite. Dies kann mit diesen CSS-Zeilen korrigiert werden;

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

Das sollte den Hintergrund nicht den ganzen Weg hinunter abdecken.

Für die beiseite, machen es absolut positioniert, mit oben und unten bei 0 wird es den ganzen Weg strecken.

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

Hier ist die Geige https://jsfiddle.net/mcsjz4j1/21/

Answer 3

Geben min-height: 100% für Ihr zur Seite CSS.

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

Für andere Problem, überprüfen Sie diese

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