梯度背景高度和100％HTML和body高度的问题

Question

我在我的HTML和身体标签上设置了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;}

小提琴

如果我没有HTML和车身标签的100％高度，则梯度将在页面底部结束，无论多长时间或短。这就是我想要的，但是我似乎找不到一个解决方案，让我可以做这两个事情。

Answer 1

有两个选项

1.固定梯度，以使其保持与页面滚动相同，

添加background-attachment:fixed;

http://jsfiddle.net/v53mg/

2.页面滚动时的梯度滚动

需要包裹div内部的身体内容，并将梯度设置为该div，也将100％的高度和降低身体边缘

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

这是一种可能对您有用的解决方案。

示例小提琴

看来问题是元素的包装方式，因为它们具有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％;}

您迫使身体占据屏幕大小的HTML标签的100％。这意味着身体不能分裂以适合其他部门。