使子女身高大于父母

Question

不知道我是否想到这是完全错误的方式，但一些指导将非常感激。我基本上试图让一个孩子div比它的父母大。

请参阅图像我想要实现

然而容器元素的高度会比较小。我是否认为我应该将它们作为单独的元素，还是有更好的练习方式？

Answer 1

你可以使用position并达到你想要的。我想说的position组合，负margin会做的伎俩：

.parent {background-color: #000; height: 100px;} 
 
.parent .child {height: 200px; background-color: #ccc; width: 75%; margin: auto;} 
 

 
.parent {margin-top: 100px;} 
 
.parent .child {position: relative; top: -50%;}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

前瞻：

如果你不知道的高度的内容，您可以使用translate将其修复为居中：

.parent {background-color: #000; width: 75%; margin: auto;} 
.parent .child {height: 200px; background-color: #fff; width: 75%; margin: auto;} 

.parent {margin-top: 100px; position: relative; min-height: 100px;} 
.parent .child {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);} 

Answer 2

只需transform: scale(1.2);你的子元素

#parent{ 
 
    margin: 40px; 
 
    background:#000; 
 
} 
 
#child{ 
 
    background:#d8d8d8; 
 
    height:140px; 
 
    box-shadow: 0 0 40px rgba(0,0,0,0.2); 
 
    position:relative; 
 
    margin:0 auto; 
 
    width:60%; 
 
    transform:scale(1.2); -webkit-transform:scale(1.2); 
 
}

<div id="parent"> 
 
    <div id="child"></div> 
 
</div>