背景漸變不佔用整個頁面長度，而是重複

第一個問題是我的背景漸變不佔用整個頁面的長度。相反，它正在重複。

第二個問題是我旁邊的元素沒有佔用頁面的整個高度。

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%; 
}

在此先感謝。

來源

2016-07-24 Chris Esteves

試試這個：

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; 
}

來源

2016-07-24 02:56:39 SRK

可惜這並沒有爲我 –

你的身體的身高不是頁面的整個高度。這可以用這些css行來糾正;

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

這應該修復背景不能覆蓋所有的方式。

對於旁邊，使其絕對定位，頂部和底部在0將一直延伸。

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

這裏的小提琴https://jsfiddle.net/mcsjz4j1/21/

來源

2016-07-24 04:14:34 gedc

這個工作對我的工作。提供的其他解決方案沒有。謝謝回覆。 –

如果您認爲答案是正確的，那麼您應該接受它 – vals

給最小高度：爲您預留的CSS 100％。

.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?

來源

2016-07-24 06:01:11

不幸的是，問題仍然存在於所提供的解決方案中。然而，由gedc提供的解決方案工作 –

背景漸變不佔用整個頁面長度，而是重複

回答

相關問題