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规则应用于正文，而是希望＆＃34; #childA＆＃34;填充父级（和父级填充正文），并应用相同的背景。更一般地说，我想要一个全尺寸的div出现在它的兄弟div下面。

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

有什么建议吗？

Answer 1

然后，您需要在应用背景属性时设置父级的width和height

#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/

Answer 2

这是你想要的吗？ http://jsfiddle.net/DIRTY_SMITH/e9ypqy5t/12/

#parent{
    width: 100%; 
    height: 100vh;
}
#childA{
    width: 100%;
    height: calc(100% - 20px);
    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;

}
#childB{width: 100%; height: 20px; background-color: lightblue;}

CSS背景div落后于另一个div

2 个答案: