我正在尝试通过设置最大高度百分比和overflow: scroll;
来设置模态内容溢出的问题。
模态是绝对定位的,有点响应,在检查器中我可以看到它的高度设置正确。我的问题是我无法为模式内容设置基于百分比的高度。
我正在尝试解决的问题的精确复制:
<div class="first">
<div class="second">
<div class="header"><h2>Header</h2></div>
<div class="content">
<ul>
<li>Asdf</li><li>Asdf</li><li>Asdf</li><li>Asdf</li>
<li>Asdf</li><li>Asdf</li><li>Asdf</li><li>Asdf</li>
<li>Asdf</li><li>Asdf</li><li>Asdf</li><li>Asdf</li>
</ul>
</div>
</div>
</div>
.first {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.second {
position: absolute;
left: 80px;
right: 80px;
top: 8%;
bottom: auto;
padding: 20px;
max-height: 80%;
border: 2px solid black;
border-radius: 4px;
background: red;
}
.content {
width: 50%;
height: 1%;
overflow: scroll;
border: 2px solid black;
border-radius: 4px;
background: green;
}
li {
width: 2000px;
height: 100px;
border: 1px solid black;
border-radius: 4px;
}
我希望content div
能够根据其父级(second div
)的百分比来设置高度,并且不会溢出,但是它的高度似乎是完全不受限制的。
在解决此问题的同时仍保持second div
的响应性的最佳方法是什么?为什么在这种情况下不能设置content div
的高度?
答案 0 :(得分:0)
您需要将height
添加到父元素(.second
)中,以便.content
从中计算自己的height
。请记住,height
值逐渐下降。如果您希望元素具有相对的height
,则需要在其层次结构中的某个位置固定height
,在目标元素和具有以下内容的元素之间将 each 元素固定的height
也有相对的height
。
在这种情况下,只需在height
上设置100%
中的.second
即可获得所需的结果:
.first {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.second {
position: absolute;
left: 80px;
right: 80px;
top: 8%;
bottom: auto;
padding: 20px;
max-height: 80%;
border: 2px solid black;
border-radius: 4px;
background: red;
height: 100%;
}
.content {
width: 50%;
height: 20%;
overflow: scroll;
border: 2px solid black;
border-radius: 4px;
background: green;
}
li {
width: 2000px;
height: 100px;
border: 1px solid black;
border-radius: 4px;
}
<div class="first">
<div class="second">
<div class="header">
<h2>Header</h2>
</div>
<div class="content">
<ul>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
<li>Asdf</li>
</ul>
</div>
</div>
</div>