我需要能够在整个页面上进行背景渐变拉伸，现在它只在整个当前视口中拉伸然后重复。如果我删除高度：100％html，body {}它会破坏页面的整个布局。有没有解决的办法？
由于
https://jsfiddle.net/wrqm3d0v/
html, body {
height: 100%;
//min-height:100%;
}
html {
background: #58abfb;
/* Old browsers */
background: -moz-linear-gradient(top, #58abfb 0%, #9acaf4 39%, #9acaf4 52%, #d3d3d3 83%, #c6c6c6 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #58abfb 0%, #9acaf4 39%, #9acaf4 52%, #d3d3d3 83%, #c6c6c6 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #58abfb 0%, #9acaf4 39%, #9acaf4 52%, #d3d3d3 83%, #c6c6c6 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#58abfb', endColorstr='#c6c6c6', GradientType=0);
/* IE6-9 */
background-size: auto, cover;
background-position: top left, center;
background-attachment: scroll, fixed;
}
#container {
height: 100%;
}
答案 0 :(得分：1)
答案 1 :(得分：1)
将高度auto提供给html代码
html {
height: auto;
}
以下是更新的 Demo
html,
body {
height: 100%;
}
html {
height: auto;
background: #58abfb;
/* Old browsers */
background: -moz-linear-gradient(top, #58abfb 0%, #9acaf4 39%, #9acaf4 52%, #d3d3d3 83%, #c6c6c6 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #58abfb 0%, #9acaf4 39%, #9acaf4 52%, #d3d3d3 83%, #c6c6c6 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #58abfb 0%, #9acaf4 39%, #9acaf4 52%, #d3d3d3 83%, #c6c6c6 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#58abfb', endColorstr='#c6c6c6', GradientType=0);
/* IE6-9 */
background-size: auto, cover;
background-position: top left, center;
background-attachment: scroll, fixed;
}
#container {
height: 100%;
}<body>
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus convallis vulputate. Aenean tristique elementum risus, eu ultricies arcu. Duis in dignissim velit. Nunc sed tempor nulla. Mauris feugiat faucibus auctor. Curabitur non velit sed sapien malesuada commodo. Praesent sed nisi malesuada, consequat leo sed, rutrum risus. Ut luctus condimentum sem placerat scelerisque. Fusce tincidunt a nisl sit amet facilisis. Aenean vitae est felis. Morbi est purus, sollicitudin ac pharetra id, tincidunt eget ipsum.
Aliquam ultricies at quam euismod dignissim. Donec laoreet euismod leo, non mattis ligula mollis malesuada. Nunc venenatis tortor tortor, in maximus massa fringilla non. Donec vehicula tellus elementum nisl dignissim convallis. Morbi vehicula vulputate dictum. Proin pellentesque leo lectus, sit amet tincidunt elit varius vitae. Mauris volutpat vitae sapien eget dictum. Aenean in tempor lorem. Donec eget dui mollis, interdum dolor nec, dignissim nunc. Aenean odio purus, tincidunt vel neque laoreet, semper iaculis nulla. Suspendisse viverra dictum mauris in vehicula.
Morbi commodo auctor aliquam. Suspendisse sed tempor mi. Cras consectetur imperdiet vulputate. Donec egestas lacus libero, ut aliquam nulla pharetra sit amet. Sed feugiat lectus quis enim aliquam, et placerat arcu blandit. Suspendisse potenti. Pellentesque vitae augue iaculis, euismod ipsum sit amet, bibendum dui. Suspendisse imperdiet eros id odio iaculis, et ultrices tellus viverra. Ut tempus semper lacus ac vehicula. Donec enim nisi, ultrices id vestibulum sed, fermentum eu nulla.
Nam pulvinar, nibh eget sollicitudin lacinia, nulla risus gravida leo, ac tristique urna tellus vitae orci. Vestibulum ultrices massa in purus efficitur, a sagittis quam tempus. Donec efficitur mollis est sit amet viverra. Curabitur et quam ante. Vestibulum nibh orci, maximus vel nisi at, suscipit vulputate libero. Donec ligula libero, feugiat vel blandit ac, commodo non ipsum. Fusce convallis sapien sit amet quam vestibulum mollis at elementum ex. Quisque in velit ut magna aliquet porttitor. Pellentesque facilisis risus vitae enim laoreet, sed lobortis mi vestibulum.
Donec laoreet consectetur leo, in volutpat elit ullamcorper in. In hac habitasse platea dictumst. Proin quis nisi et odio finibus dictum. In hac habitasse platea dictumst. Nam bibendum risus vitae nulla tempor iaculis. Curabitur rhoncus, mi quis eleifend pellentesque, ipsum diam ullamcorper sapien, non rhoncus metus risus vitae ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin magna vitae fringilla accumsan. Duis maximus sollicitudin lectus ac interdum. Ut vehicula eros lorem, vel varius sapien commodo fermentum. Vivamus iaculis lorem ante, eget dapibus nisi varius a. Nam mollis mi ut placerat pulvinar. Praesent ipsum arcu, consectetur ultricies aliquet hendrerit, ornare egestas ex.
Ut faucibus imperdiet dui, eu aliquet ligula bibendum elementum. Vivamus ut rhoncus quam. Sed tempus felis convallis urna interdum, sed consequat orci feugiat. Donec scelerisque egestas mi et lacinia. Vestibulum eu tempor velit, sed bibendum tellus. Vestibulum ac ullamcorper diam. Etiam fringilla augue leo, pulvinar faucibus ex placerat et.
Nullam tincidunt lacinia neque, et convallis dui pretium nec. Sed eget lacus molestie, finibus lectus sed, venenatis libero. Vestibulum tincidunt, lorem vitae pretium aliquet, dolor risus iaculis ex, vel fringilla risus dui quis leo. Morbi non neque libero. Sed lacinia ipsum vitae lacus vehicula, non volutpat eros vehicula. In venenatis efficitur diam. Nulla facilisi. Aliquam porttitor turpis sit amet convallis volutpat.
Ut dapibus, arcu sed convallis tristique, nulla erat vestibulum erat, nec porta nisl ante sed arcu. Donec condimentum elit dolor, eget semper risus tempus a. Aenean consequat eu nisl vitae varius. Nulla varius nunc nisl, sed consequat tortor blandit a. Suspendisse posuere vitae arcu nec ultricies. Vivamus sed nisi tristique, mattis urna vel, rhoncus urna. Suspendisse tellus mauris, tempor eget risus sed, volutpat pellentesque augue. Donec porttitor orci elit, eu aliquam sem posuere quis. Etiam at velit in purus pharetra mollis ut vitae metus. Nunc maximus nisi justo. Maecenas in viverra ex. In hac habitasse platea dictumst.
Quisque lacinia mauris sed dui vulputate rhoncus. Suspendisse imperdiet purus sit amet finibus gravida. Praesent varius est tellus, eget sodales felis eleifend quis. Aenean tempor facilisis odio vulputate euismod. Quisque quis dui risus. Donec pharetra felis nisl, ac pellentesque justo accumsan in. Proin vel fermentum urna. Ut eu nisi ac urna rhoncus blandit. Etiam sit amet mauris et urna dictum pharetra. Fusce aliquet dui turpis, auctor placerat sapien pretium ut. Morbi augue risus, vehicula eu enim a, hendrerit blandit nisi. Vestibulum tempor eros ac arcu venenatis, non bibendum erat mollis. Proin non enim eu augue scelerisque tristique rhoncus et tellus.
Ut varius lacus non elit fermentum, quis feugiat sem posuere. Integer commodo non lacus placerat cursus. Curabitur tincidunt arcu nec vestibulum iaculis. Donec pretium ut velit eu elementum. Sed euismod odio at orci vestibulum posuere. Curabitur eu dapibus risus. Proin ac velit id tortor aliquam cursus et et urna. Morbi vestibulum nunc non bibendum laoreet. Sed neque nulla, egestas ac molestie ut, lacinia a diam. Proin viverra dictum urna eu rutrum. Suspendisse dui elit, rutrum viverra pulvinar eget, ultricies at mi. Nulla porta mauris id egestas convallis. Integer hendrerit sollicitudin justo at gravida. Suspendisse hendrerit dolor magna, laoreet pharetra felis hendrerit non. Morbi molestie lobortis felis, scelerisque ultricies dolor molestie tincidunt. Quisque cursus auctor nibh sit amet laoreet.
Pellentesque interdum, tortor vitae mattis placerat, tellus mi maximus urna, et placerat nulla lorem eget ligula. Praesent condimentum pellentesque massa sit amet porta. Ut nec aliquam risus, et ultricies dui. Phasellus vestibulum viverra gravida. Aliquam mollis auctor purus, nec tincidunt eros porttitor nec. Nunc interdum lorem quis ligula fringilla, a molestie libero ullamcorper. Suspendisse dignissim est a sem scelerisque, sit amet finibus purus aliquet. Donec ut magna nulla. Ut ac ante et justo hendrerit sodales. Proin condimentum accumsan lorem sed rhoncus. Quisque quis leo sit amet nisl pretium tempor in non tortor.
Morbi mauris metus, posuere consequat bibendum egestas, efficitur nec diam. Etiam mi lacus, mattis sed lectus quis, rhoncus tristique neque. Donec ut pulvinar metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus a elementum enim, non euismod justo. Sed in risus scelerisque, pulvinar quam ac, lacinia felis. Suspendisse commodo massa id nisi tristique commodo. Nam ullamcorper suscipit massa vel dignissim.
Maecenas in ultrices augue. Etiam eu efficitur dui. Mauris nec libero fermentum, imperdiet arcu ut, vehicula nibh. Vivamus dapibus pharetra quam vitae commodo. Etiam posuere maximus sapien et ullamcorper. Sed placerat elit augue, vitae ultrices magna fringilla non. Etiam accumsan, lectus nec feugiat viverra, eros risus dignissim massa, eget vulputate metus nunc eget diam. Nunc nec imperdiet quam. Sed et nulla vestibulum, volutpat elit in, vestibulum tortor. Mauris condimentum vel nunc non cursus. Nulla pretium ipsum sit amet neque accumsan, vitae rutrum massa scelerisque.
Phasellus sapien urna, aliquam ac tellus at, blandit mollis velit. Pellentesque id ipsum aliquet, placerat magna ac, pulvinar massa. Donec sagittis consectetur viverra. Quisque vel purus sit amet mauris mollis mattis ac a est. Ut sit amet enim massa. Pellentesque euismod sed enim sed pretium. Proin ultricies erat at mi dapibus, sed fermentum libero congue. Nullam laoreet condimentum ex at rutrum. Integer dolor elit, viverra ac blandit quis, porta vel velit. Praesent rhoncus, nunc in viverra congue, nulla neque laoreet lectus, nec tincidunt nisl mi at magna.
Vestibulum arcu dolor, dictum quis condimentum vel, lacinia vitae lacus. Sed ornare sem eu dolor sodales, ac egestas quam mattis. Curabitur est diam, sagittis sagittis ultricies ut, cursus quis neque. Nullam tempus gravida elit vehicula venenatis. Pellentesque vitae blandit justo. Etiam lectus sapien, accumsan in rutrum id, tempor sed metus. Praesent sodales dignissim pulvinar. Aliquam suscipit et magna et venenatis. Nunc sem elit, laoreet id lectus non, auctor molestie lectus. Sed ac vulputate nisl, sit amet hendrerit orci. Etiam sit amet tellus metus. Integer finibus consequat metus ornare fermentum. Duis vestibulum orci accumsan nisi pretium, pellentesque consequat velit faucibus. Integer faucibus nulla et justo bibendum aliquam. Cras semper purus ut imperdiet dictum.
Donec lacinia dictum velit a aliquam. Praesent nec lobortis eros. Etiam tincidunt massa a augue tempor congue at ac dolor. Nunc hendrerit suscipit nulla vel eleifend. Vestibulum quis turpis et magna consectetur elementum at sit amet dui. Ut pulvinar tincidunt quam, vel semper enim elementum vitae. Donec leo urna, blandit id lectus ac, cursus viverra lacus. Integer dignissim, nulla eget porta faucibus, eros sem ultricies ipsum, vitae semper risus magna et arcu. Pellentesque in neque tempor, fringilla libero non, aliquam turpis. Aliquam porttitor neque ut sem placerat sodales. Sed a nulla scelerisque, volutpat odio et, interdum lacus. Praesent placerat, ante sed eleifend venenatis, dolor tortor posuere nibh, eu sodales tortor mi in nisl.
Ut tempus urna non augue maximus, ut sollicitudin urna ultrices. Nunc mollis, justo sit amet facilisis maximus, sem ex tincidunt turpis, sit amet ullamcorper lacus urna id velit. Nulla facilisi. Morbi fringilla dui at vehicula porttitor. Proin sit amet magna ac leo cursus fermentum sed sed magna. Nulla ac sapien non nisl dictum consectetur mollis molestie velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus molestie, lorem sit amet pulvinar maximus, massa libero sagittis arcu, non convallis metus mi aliquet sem. Etiam sed blandit turpis. In posuere felis nunc, non ultricies lacus venenatis a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a aliquet nunc. Mauris dapibus tortor mi, sit amet pellentesque sem tempus rutrum. Maecenas sit amet mollis nisi. Aliquam efficitur at sapien sit amet semper. Sed nec faucibus mi, finibus consequat elit. Integer et eros et risus efficitur ultrices non nec quam.
Duis a enim facilisis, posuere lectus id, posuere nunc. Quisque bibendum, eros in commodo lacinia, dolor dui viverra tellus, at porta turpis tellus vel nisi. Maecenas bibendum dictum commodo. Donec rutrum justo nec turpis egestas, nec venenatis elit dignissim. Nulla nec lacus eu libero semper porttitor. Nam maximus eu lorem laoreet convallis. Nam porttitor vestibulum fringilla. Sed elementum dictum commodo.
Pellentesque nisl arcu, viverra nec efficitur tristique, lobortis vitae leo. Nullam pharetra at nisl in varius. Fusce non metus magna. Mauris semper ipsum in sem vehicula rhoncus. Phasellus quis tellus euismod, ornare nisl rutrum, tristique risus. Curabitur lacinia blandit auctor. Nullam pretium, nunc ac venenatis posuere, quam sem volutpat sapien, in volutpat justo leo a leo. Vivamus condimentum orci et magna sollicitudin sollicitudin sit amet vitae lacus. Proin sed turpis dignissim sem lobortis iaculis quis eu est. Aenean volutpat nulla ligula, vitae tristique est rhoncus a. Fusce fringilla risus nec volutpat feugiat.
</div>
<section id="footer-container">
<footer id="footer">
footer
</footer>
</section>
</body>