html - CSS 背景 div 在另一个 div 后面

Question

我正在尝试在一些 <divs> 后面放置一个网格图案，如下所示 ( https://jsfiddle.net/4e5mcmk4/25/ ):

<div id="parent">
    <div id="childA"></div>
    <div id="childB">
        hello
    </div>
</div>

这是 CSS:

body {
    background:
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(-90deg, transparent 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(transparent 1px, transparent 1px), transparent;
    background-size:
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px;
}

这是我想要的外观，但不是将此 CSS 规则应用于主体，我希望“#childA”填充父级(和父级填充主体)，并应用相同的背景。更一般地说，我想要一个全尺寸的 div 出现在它的兄弟 div 的下面。

但是，我似乎无法让 parent、childA 或 childB 展开以填充 div 的空间。

有什么建议吗？

Answer 1

然后您需要做的就是在应用背景属性时设置父级的宽度和高度

#parent{
background:
    linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
    linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
    linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
    linear-gradient(-90deg, transparent 1px, transparent 1px),
    linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
    linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px;
    width:100%;
   height:100%;
   position:absolute;
}


#childA{
    width:100%;
    height:100%;
}

我添加了绝对位置，因为它没有固定宽度的父级

https://jsfiddle.net/4e5mcmk4/27/