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規則應用於body，而是希望“ #childA”填充父對象（父對象填充body），並應用相同的背景。 更一般而言，我希望全尺寸div出現在其同級div下方。

但是，我似乎無法讓parent，childA或childB擴展以填充div的空間。

有什么建議么？

Answer 1

您需要做的就是在應用background屬性的同時設置父對象的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;}