Question

我在HTML和body标签上设置了100％的高度，这样我就可以在元素高度中使用相对单位，而不需要父元素中的绝对值高度。这一切都很好，但它与我在身体标签上设置的渐变背景混淆。

一些模型代码：

<div class="a">stuff</div>
<div class="b">stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff </div>

CSS：

html{height:100%;}
body{height:100%;background:linear-gradient(#400040,#FFF)}
.a{background:#F00;height:100%;width:30%;display:inline-block;}
.b{background:#00F;height:100%;width:30%;display:inline-block;}

Fiddle

如果我在HTML和body标签上没有100％高度，则无论多长或多短，渐变都将在页面底部结束。这就是我想要的，但我似乎找不到允许我做这两件事的解决方案。

Answer 1

有两种选择，

1.将渐变固定，使其与页面滚动保持相同，

添加background-attachment:fixed;

http://jsfiddle.net/v53mG/

2.页面滚动时有渐变滚动

需要在div内部包含body的内容并将渐变设置为该div，也是100％高度并删除body的边距

<强> CSS

.bg-wrapper{
    background:linear-gradient(#400040,#FFF);
    height:100%;
}

<强> HTML

<div class="bg-wrapper">
    <div class="a">stuff</div>
<div class="b">stuff stuff stuff stuff stuff stuff ... </div>
</div>

http://jsfiddle.net/v53mG/1/

Answer 2

这是一个可能适合您的解决方案。

<强> Example Fiddle

看起来问题是元素是如何包装的，因为它们有display:inline-block;，一个解决方案是给它们display:block和float: left。

CSS：

body div {float: left;}

.a{
  //other styles
  display:block;
 }

.b{
  //other styles
  display:block;
 }

Answer 3

这实际上不可能保留这两件事。当你把

体{高度：100％;}

你强制身体获取100％的html标签，这是你屏幕的大小。这意味着身体无法伸展以适应其他div。

渐变背景高度和100％html和身高的问题

3 个答案: