我整天都在玩这个，但我不太明白。有一个浅绿色到深绿色的渐变背景，我直接放在 html,body { } 代码上。这是一个被拉入应用程序的网页，但我也像使用任何其他网页一样使用 Chrome 访问该页面，结果是相同的。
我现在还不能添加图片(低代表和所有)，因为这是我们个人服务器上的银行应用程序，我被要求不要链接任何人。所以这是我的代码(我认为相关的部分)。
它似乎做的是首先填充到渐变中最后一个 div 的底部，然后将渐变应用到非常非常背景(当我展开窗口时，“底部”渐变像被拉动一样变化，但是div 后面的那个不会改变)。在我的手机(nexus 4 android)上，渐变 100% 填充原始屏幕 View ，但低于它的任何东西都是它自己的渐变，方式与上面相同(也就是，如果我滚动，屏幕底部有一条清晰的线曾经)。
我试过设置 html、body with height: 100%、min-height: 100% 或 max-height: 100% 但都没有成功。最小高度可能是最接近的，因为其他两个呈现纯背景颜色而不是“第二”渐变。
编辑:试图更好地解释......因为我不能做截图，图表怎么样:P
--------------------
| | (A) | | <--- if this is the main page....
| | <---------- then (A) is the total area of my content
| | | | to the bottom of my last div.
| --------------- | The gradient fills the main page to the bottom
| | of (A) (which spans the full width, poorly represented).
| | But then the entire thing seems to have it's own gradient
| | as well that fills in behind (A) and flows to the bottom,
-------------------- and on a mobile device, the bottom line of (A) is not
the bottom of the last div, but the bottom of the
device screen. So when you scroll, that bottom line
scrolls up with the rest of the content and there is a
second gradient background that fills the rest of the area
like it's supposed to. But the gradient is only applied
to one area in the CSS, nowhere else.
我该如何解决这个问题？
html, body
{
background: #627d4d;
background: -moz-linear-gradient(top, #627d4d 0%, #1f3b08 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08));
background: -webkit-linear-gradient(top, #627d4d 0%,#1f3b08 100%);
background: -o-linear-gradient(top, #627d4d 0%,#1f3b08 100%);
background: -ms-linear-gradient(top, #627d4d 0%,#1f3b08 100%);
background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 );
min-height: 100%;
font-family: "Helvetica", sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
.container
{
width: 100%;
min-height: 100%;
margin: auto;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
....
</head>
<body>
<form id="frm" class="container" runat="server">
<div class="topBar">
....
最佳答案
希望我能正确理解你的问题:
如果我这样做，你的大部分代码都是正确的。您希望保留 margin: 0 以及 min-height。基本上，您想给背景一个固定的位置，以便即使在其上方的文档滚动时也能“保持在适当的位置”。
尝试将其添加到 padding: 0;...
background-repeat: no-repeat;
background-attachment: fixed;
关于android - 渐变仅到达屏幕边缘 - 而不是 html(手机上的 html/css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20913651/