作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在另一个高度为 48px 且位置相对的 div 中有一个 div。现在我在 div 中有一个子 div,它的高度是 48px。我希望将子 div max-height 设置为 80%,将 min-height 设置为 40%。这样做时,子 div 的高度仅为 48px。
下面是代码,
<div class="top_div">
<div class="drawer">
<div class="menu">
<header>
<Svg>
<button></button>
</header>
<ul>
<li></li>
</ul></div></div></div>
.top_div {
z-index: 1;
display: flex;
position: relative;
width: 100%;
height: 48px;
padding: 0 12px 0 12px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
align-items: center;
}
.drawer {
display: flex;
flex-direction: column;
background-color: $white;
position: absolute;
width: 380px;
top: 55px;
right: 8px;
min-height: 40%;
max-height: 80%;
header {
height: 41px;
border-bottom: 1px solid #CCCCCC;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 0px;
padding-top: 2px;
svg {
margin-left: 16px;
}
}
ul {
overflow-x: hidden;
}
::after {
content: " ";
position: absolute;
bottom: 100%;
left: 83%;
margin-left: -5px;
border-width: 14px;
border-style: solid;
border-color: transparent transparent $white transparent;
}
}
如果我删除 position : relative 的 top_div 那么它工作正常但删除 topbar 的 box-shadow ...我该如何解决这个问题。我希望盒子阴影在那里。或者,如果我保留 position:relative 的 top_div,那么我希望抽屉的高度为 80%。
我该如何解决这个问题。有人可以帮助我吗?谢谢。
最佳答案
我将代码插入到一个 html 文档中,并将您 child 的 div 的 position
设置为 relative
。对我来说,这解决了这个问题,我得到了你想要做的事情。
试试这个。
我希望这对我有所帮助。
关于html - 如何为子div设置高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55598691/
我是一名优秀的程序员,十分优秀!