1
我與溢出瞎搞，我發現我的列表，當我創建了頂級的包裝我的代碼消失了我的無序列表中消失。當我添加溢出-Y
body {
font-size: 36px;
overflow: hidden;
font-family: "Arial";
}
ul {
list-style-type: none;
}
li {
transition: color 0.2s ease;
}
li:hover {
color: red;
}
h1,h2 {
color: lightcoral;
}
.left,.right {
position: relative;
text-align: center;
display: inline-block;
width: 50%;
height: 100vh;
}
.right {
float: right;
background-color: lightgreen;
}
.left {
float: left;
background-color: lightblue;
}
.top-wrapper {
width: 100%;
}
.top-menu {
background-color: darkgreen;
height: 30px;
}
.sub-top-l,.sub-top-r {
display: inline-block;
width: 50%;
height: 20px;
font-size: 12px
}
.sub-top-l {
float: left;
background-color: darkblue;
}
.sub-top-r {
float: right;
background-color: darkred;
}
.list-wrap {
overflow-y: auto;
height: 100%;
}<div class="content-wrapper">
<div class="left">
<h1>Cowabunga</h1>
</div>
<div class="right">
<div class="top-wrapper">
<div class="top-menu">
</div>
<div class="sub-top-l">
test
</div>
<div class="sub-top-r">
test
</div>
</div>
<div class="list-wrap">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</div>以獲取列表顯示的唯一方法是添加顯示屬性絕對的CSS類.top-wrapper。
有誰知道這是爲什麼默認行爲？我正在尋找一個詳細的解釋。
添加position: absolute到.top-wrapper讓它顯示出來。
您也可以在列表使用'溢出-Y顯示：可見;' – TylerH
和是否刪除頂層包裝和所有子元素。我仍然沒有想出爲什麼壽。 – Garuuk