我正在构建一个全屏画廊,
#cover {
position: absolute;
width: 500px;
height: 500px;
background: rgba(44, 69, 128, 0.65);
z-index: 10;
}
.divHolder {
background: #fff;
color: #2c4580;
position: relative;
box-shadow: 2px 2px 2px #333;
padding: 10px;
margin: 20px 20px;
overflow: auto;
height: 100%;
}
.divHolder div:hover {
border: 10px solid #000;
}
.divHolder div {
width: 100px;
height: 100px;
background: black;
padding: 10px;
display: inline-block;
cursor: pointer;
border: 10px solid white;
}
<div id="cover">
<div class="divHolder">
<div>image</div>
...
<div>image</div>
</div>
</div>
如何将子 div "divHolder"holder 放入 "holder"中。我一直不明白填充和边距与子 div 的工作方式。
为了引用,我添加了代码 jsfiddle
最佳答案
你可以只使用calc()
为 .divHolder
计算合适的高度。由于您的边距,.divHolder
超出了父容器,因为您将其设置为 height: 100%;
。减少 100% 的顶部和底部边距,它应该适合:
height: calc(100% - 40px);
#cover {
position: absolute;
width: 500px;
height: 500px;
background: rgba(44, 69, 128, 0.65);
z-index: 10;
}
.divHolder {
background: #fff;
color: #2c4580;
position: relative;
box-shadow: 2px 2px 2px #333;
padding: 10px;
margin: 20px 20px;
overflow: auto;
height: calc(100% - 40px);
box-sizing: border-box;
}
.divHolder div:hover {
border: 10px solid #000;
}
.divHolder div {
width: 100px;
height: 100px;
background: black;
padding: 10px;
display: inline-block;
cursor: pointer;
border: 10px solid white;
}
<div id="cover">
<div class="divHolder">
<div>image</div>
<div>image</div>
<div>image</div>
<div>image</div>
<div>image</div>
<div>image</div>
<div>image</div>
<div>image</div>
<div>image</div>
<div>image</div>
<div>image</div>
<div>image</div>
</div>
</div>
关于html - 子元素上的填充移动父元素 - CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40219420/