如何使子div占用父div的大小

Question

我正在尝试创建页面的占位符视图，直到加载实际页面。

我希望此div 元素获取其父级 div

的大小

<div class="col-md-1 col-sm-1 col-xs-1 col-md-push-3 col-sm-push-3 col-xs-push-3 property-masker-sub-four-one"></div>

检查代码段。这是一条很薄的绿线。我希望它是父 div的大小，我会给它一个白色，这样它看起来像一个空白，之前的灰色闪烁区域看起来像{ {1}}。

button

@keyframes placeHolderShimmer{
    0%{
        background-position: -368px 0
    }
    100%{
        background-position: 368px 0
    }
}

.calendar-wrapper, .property-wrapper, .paid-wrapper, .details-wrapper{
    border: 2px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    min-height: 250px;
    /*margin-left: 40px;*/
}

.paid-wrapper{
    min-height: 160px;
}

.calendar-wrapper{
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
}

.paid-wrapper{
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
}

.property-wrapper{
	min-height: 150px;
}

.details-wrapper{
    min-height: 350px;
}

.property-animated-background, .details-animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 170px;
}

.details-animated-background{
    height: 350px;
}

.property-masker-one{
	padding: 15px 0;
    background-color: white;
}

.property-masker-two{
    padding: 17px 0;
}

.property-masker-three{
    padding: 20px 0;
    background-color: white;
}

.property-masker-four{
    padding: 17px 0;
}

.property-masker-sub-four-one{
    background-color: green;
}

.property-masker-five{
    padding: 16px 0;
    background-color: white;
}

我想要这样

Answer 1

看看这个代码。

获取其父div的大小的div元素

<div id="wrapper" class="col-sm-5">
<div class="row row-eq-height">

 <div class="col-sm-2"><i class="fa fa-pied-piper fa-4x" aria-hidden="true"></i></div>

<div class="col-sm-10">
  <h1>Pied Piper</h1>Pied Piper takes all your files and makes them smaller for when you need a “little help”! It’s built on a universal compression engine that stacks on any file, data, video or image no matter what size.
  <p></p>
 </div>

</div>
</div>

https://codepen.io/arshohag/pen/pPvMdB

Answer 2

我想这就是你想要实现的目标。

将两个子元素添加到property-masker-four（请注意我删除了所有引导类，因为我们需要自定义大小和位置）

<div class="property-masker-four">
    <div class="property-masker-sub-four-one"></div>
    <div class="property-masker-sub-four-two"></div>
</div>

在你的CSS中，只需给父母一个亲戚，将绝对位置给孩子。将第一个从左侧放置到33％，将第二个放置到左侧66％以保持响应。然后给两个负余量 - 左边等于它们的一半。

.property-masker-four {
    position: relative;
    padding: 17px 0;
}

.property-masker-sub-four-one, .property-masker-sub-four-two {
    background-color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    margin-left: -10px;
}
.property-masker-sub-four-one{
    left: 33.33%;
}
.property-masker-sub-four-two{
    left: 66.66%;
}

Here是小提琴