具有可滾動內部 html 的絕對定位容器

Question

我目前正在從事一個項目，我被迫將我的容器絕對定位。 容器的內部 html 包含一個列表。 該列表的最大高度應為 200 像素，並且應該是可滾動的。 不幸的是，我的想法似乎行不通。

<div>
  <ul>
    <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
         <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
         <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
         <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
  </ul>
</div>

<style>

div {
  position: absolute;
  top: 50px;
  border: 1px solid red;
  max-height: 100px;
}

div ul {
  position: relative;
   max-height: 100px;
   border: 1px solid green;
   overflow: visible;
}

</style>

Answer 1

你必須設置overflow: scroll; 用於內容包裝。 嘗試一下：

 div { position: absolute; top: 50px; border: 1px solid red; max-height: 200px; overflow: scroll; } div ul { position: relative; border: 1px solid green; }

 <div> <ul> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ul> </div>

Answer 2

您的代碼不起作用，因為您設置了overflow: visible將其更改為overflow: scroll並且它變得可滾動:)