如何设置 html 元素填充颜色与 body 颜色相同

Question

我在页面底部有一个固定元素，它位于所有其他元素之上。它大约是页面宽度的 33%。当我滚动页面时，其他元素继续在这个元素后面移动。

我想要的是该元素的顶部与其他元素开始隐藏的位置之间有一点距离。这很容易实现。但我的要求是让这个间隙的颜色与那个垂直位置的 body 的颜色相同。

有没有可能最好不用JavaScript？

这个fiddle中的白色区域是我想要的颜色与body（在那个垂直位置）相同的颜色：https://jsfiddle.net/f5qnv8bL/1/

Check this image

body {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
  height: 2000px;
}

<div style="background-color:green; float:right; height:750px;">
Something here
</div>

<div style="background-color:white; height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

Answer 1

评论区@Expressingx的建议是对的，你可以在空隙处添加相同的颜色试试div。

添加CSS:

.yes {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
}

并将 yes class 添加到您的 HTML:

<div class="yes" style="height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

我知道这不是灵丹妙药，但试一试也没关系。

Answer 2

你是这个意思吗？

Html:

<div style="background-color:green; float:right; height:750px;">
Something here
</div>

<div id="whatever" style="background-color:white; height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

CSS:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
  height: 2000px;
}

#whatever {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
}

如何设置 html 元素填充颜色与 body 颜色相同

How to set html element padding color same as body color

html

javascript

css

margin

padding