Question

我有一个绝对定位的#manager元素，其中width: 80%;和min-height: 80%;居中，其中必须有几个可独立滚动的容器，例如#groups。 #groups的高度也必须为100%。在这种情况下，我无法使其滚动，但是如果给它固定的高度（例如500px;），它就可以工作。如何使我的#groups容器全高并且可以同时滚动？

这是小提琴：https://jsfiddle.net/vaxobasilidze/nxem7sk1/

html,
body,
#map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#manager {
  position: absolute;
  min-height: 80%;
  max-height: 80%;
  width: 80%;
  left: 10%;
  top: 10%;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(66, 134, 244, 0.5);
  border-radius: 6px;
  z-index: 10;
  overflow: hidden;
}

#groups {
  position: relative;
  max-height: 80%;
  box-sizing: border-box;
  width: 150px;
  overflow: auto;
  color: white;
}

#groupslist {
  list-style: none;
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.group {
  min-height: 30px;
  line-height: 30px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  border-top: 1px solid rgba(66, 134, 244, 0.5);
  border-left: 1px solid rgba(66, 134, 244, 0.5);
  border-right: 1px solid rgba(66, 134, 244, 0.5);
  box-sizing: border-box;
}

.group:last-child {
  border-bottom: 1px solid rgba(66, 134, 244, 0.5);
}

<html>

  <head>

  </head>

  <body>
    <div id="manager">
      <div id="groups">
        <ul id="groupslist">

          <li class="group" groupid="68">
            <title>Templates</title>Templates</li>
          <li class="group" groupid="67">
            <title>.Templates - Cisco</title>.Templates - Cisco</li>
          <li class="group" groupid="23">
            <title>Abastumani</title>Abastumani</li>
          <li class="group" groupid="24">
            <title>Akhalcikhe</title>Akhalcikhe</li>
          <li class="group" groupid="25">
            <title>Akhalkalaki</title>Akhalkalaki</li>
          <li class="group" groupid="26">
            <title>Bakuriani</title>Bakuriani</li>
          <li class="group" groupid="27">
            <title>Batumi</title>Batumi</li>
          <li class="group" groupid="28">
            <title>Bolnisi</title>Bolnisi</li>
          <li class="group" groupid="29">
            <title>Borjomi</title>Borjomi</li>
          <li class="group" groupid="30">
            <title>Cageri</title>Cageri</li>
          <li class="group" groupid="31">
            <title>Calenjikha</title>Calenjikha</li>
          <li class="group" groupid="32">
            <title>Calka</title>Calka</li>
          <li class="group" groupid="33">
            <title>Chiatura</title>Chiatura</li>
          <li class="group" groupid="34">
            <title>Chkhorocku</title>Chkhorocku</li>
          <li class="group" groupid="35">
            <title>Civi</title>Civi</li>
          <li class="group" groupid="36">
            <title>Dedoflis Ckaro</title>Dedoflis Ckaro</li>
          <li class="group" groupid="5">
            <title>Discovered hosts</title>Discovered hosts</li>
          <li class="group" groupid="37">
            <title>Dmanisi</title>Dmanisi</li>
          <li class="group" groupid="38">
            <title>Dusheti</title>Dusheti</li>
          <li class="group" groupid="18">
            <title>ELBER</title>ELBER</li>
          <li class="group" groupid="39">
            <title>Godora</title>Godora</li>
          <li class="group" groupid="40">
            <title>Gori</title>Gori</li>
          <li class="group" groupid="41">
            <title>Gudauri</title>Gudauri</li>
          <li class="group" groupid="65">
            <title>HARRIS</title>HARRIS</li>
          <li class="group" groupid="21">
            <title>HeadEnd</title>HeadEnd</li>
          <li class="group" groupid="7">
            <title>Hypervisors</title>Hypervisors</li>
          <li class="group" groupid="42">
            <title>Jvari</title>Jvari</li>
          <li class="group" groupid="43">
            <title>Kaspi</title>Kaspi</li>
          <li class="group" groupid="44">
            <title>Keda</title>Keda</li>
          <li class="group" groupid="45">
            <title>Kharagauli</title>Kharagauli</li>
          <li class="group" groupid="46">
            <title>Khulo</title>Khulo</li>
          <li class="group" groupid="47">
            <title>Kojori</title>Kojori</li>
          <li class="group" groupid="48">
            <title>Kutaisi</title>Kutaisi</li>
          <li class="group" groupid="66">
            <title>Kvacxuti</title>Kvacxuti</li>
          <li class="group" groupid="49">
            <title>Kvareli</title>Kvareli</li>
          <li class="group" groupid="50">
            <title>Lentekhi</title>Lentekhi</li>
          <li class="group" groupid="2">
            <title>Linux servers</title>Linux servers</li>
          <li class="group" groupid="17">
            <title>MIKROTIK</title>MIKROTIK</li>
          <li class="group" groupid="51">
            <title>Martvili</title>Martvili</li>
          <li class="group" groupid="52">
            <title>Mravaldzali</title>Mravaldzali</li>
          <li class="group" groupid="53">
            <title>Nasper</title>Nasper</li>
          <li class="group" groupid="54">
            <title>Ninocminda</title>Ninocminda</li>
          <li class="group" groupid="55">
            <title>Sachkhere</title>Sachkhere</li>
          <li class="group" groupid="56">
            <title>Shuakhevi</title>Shuakhevi</li>
          <li class="group" groupid="57">
            <title>Sighnahi</title>Sighnahi</li>
          <li class="group" groupid="58">
            <title>SighnahiStefancminda</title>SighnahiStefancminda</li>
          <li class="group" groupid="15">
            <title>Stereo+</title>Stereo+</li>
          <li class="group" groupid="16">
            <title>Switches</title>Switches</li>
          <li class="group" groupid="64">
            <title>TBS Tuner TEST</title>TBS Tuner TEST</li>
          <li class="group" groupid="20">
            <title>TREDESS</title>TREDESS</li>
          <li class="group" groupid="59">
            <title>Talaxa</title>Talaxa</li>
          <li class="group" groupid="60">
            <title>Tbilisi</title>Tbilisi</li>
          <li class="group" groupid="1">
            <title>Templates</title>Templates</li>
          <li class="group" groupid="12">
            <title>Templates/Applications</title>Templates/Applications</li>
          <li class="group" groupid="13">
            <title>Templates/Databases</title>Templates/Databases</li>
          <li class="group" groupid="8">
            <title>Templates/Modules</title>Templates/Modules</li>
          <li class="group" groupid="19">
            <title>Templates/Network Devices</title>Templates/Network Devices</li>
          <li class="group" groupid="9">
            <title>Templates/Network devices</title>Templates/Network devices</li>
          <li class="group" groupid="10">
            <title>Templates/Operating systems</title>Templates/Operating systems</li>
          <li class="group" groupid="11">
            <title>Templates/Server hardware</title>Templates/Server hardware</li>
          <li class="group" groupid="14">
            <title>Templates/Virtualization</title>Templates/Virtualization</li>
          <li class="group" groupid="61">
            <title>Tianeti</title>Tianeti</li>
          <li class="group" groupid="62">
            <title>Tkhibuli</title>Tkhibuli</li>
          <li class="group" groupid="63">
            <title>Urta</title>Urta</li>
          <li class="group" groupid="6">
            <title>Virtual machines</title>Virtual machines</li>
          <li class="group" groupid="4">
            <title>Zabbix servers</title>Zabbix servers</li>
          <li class="group" groupid="68">
            <title>Templates</title>Templates</li>
          <li class="group" groupid="67">
            <title>.Templates - Cisco</title>.Templates - Cisco</li>
          <li class="group" groupid="23">
            <title>Abastumani</title>Abastumani</li>
          <li class="group" groupid="24">
            <title>Akhalcikhe</title>Akhalcikhe</li>
          <li class="group" groupid="25">
            <title>Akhalkalaki</title>Akhalkalaki</li>
          <li class="group" groupid="26">
            <title>Bakuriani</title>Bakuriani</li>
          <li class="group" groupid="27">
            <title>Batumi</title>Batumi</li>
          <li class="group" groupid="28">
            <title>Bolnisi</title>Bolnisi</li>
          <li class="group" groupid="29">
            <title>Borjomi</title>Borjomi</li>
          <li class="group" groupid="30">
            <title>Cageri</title>Cageri</li>
          <li class="group" groupid="31">
            <title>Calenjikha</title>Calenjikha</li>
          <li class="group" groupid="32">
            <title>Calka</title>Calka</li>
          <li class="group" groupid="33">
            <title>Chiatura</title>Chiatura</li>
          <li class="group" groupid="34">
            <title>Chkhorocku</title>Chkhorocku</li>
          <li class="group" groupid="35">
            <title>Civi</title>Civi</li>
          <li class="group" groupid="36">
            <title>Dedoflis Ckaro</title>Dedoflis Ckaro</li>
          <li class="group" groupid="5">
            <title>Discovered hosts</title>Discovered hosts</li>
          <li class="group" groupid="37">
            <title>Dmanisi</title>Dmanisi</li>
          <li class="group" groupid="38">
            <title>Dusheti</title>Dusheti</li>
          <li class="group" groupid="18">
            <title>ELBER</title>ELBER</li>
          <li class="group" groupid="39">
            <title>Godora</title>Godora</li>
          <li class="group" groupid="40">
            <title>Gori</title>Gori</li>
          <li class="group" groupid="41">
            <title>Gudauri</title>Gudauri</li>
          <li class="group" groupid="65">
            <title>HARRIS</title>HARRIS</li>
          <li class="group" groupid="21">
            <title>HeadEnd</title>HeadEnd</li>
          <li class="group" groupid="7">
            <title>Hypervisors</title>Hypervisors</li>
          <li class="group" groupid="42">
            <title>Jvari</title>Jvari</li>
          <li class="group" groupid="43">
            <title>Kaspi</title>Kaspi</li>
          <li class="group" groupid="44">
            <title>Keda</title>Keda</li>
          <li class="group" groupid="45">
            <title>Kharagauli</title>Kharagauli</li>
          <li class="group" groupid="46">
            <title>Khulo</title>Khulo</li>
          <li class="group" groupid="47">
            <title>Kojori</title>Kojori</li>
          <li class="group" groupid="48">
            <title>Kutaisi</title>Kutaisi</li>
          <li class="group" groupid="66">
            <title>Kvacxuti</title>Kvacxuti</li>
          <li class="group" groupid="49">
            <title>Kvareli</title>Kvareli</li>
          <li class="group" groupid="50">
            <title>Lentekhi</title>Lentekhi</li>
          <li class="group" groupid="2">
            <title>Linux servers</title>Linux servers</li>
          <li class="group" groupid="17">
            <title>MIKROTIK</title>MIKROTIK</li>
          <li class="group" groupid="51">
            <title>Martvili</title>Martvili</li>
          <li class="group" groupid="52">
            <title>Mravaldzali</title>Mravaldzali</li>
          <li class="group" groupid="53">
            <title>Nasper</title>Nasper</li>
          <li class="group" groupid="54">
            <title>Ninocminda</title>Ninocminda</li>
          <li class="group" groupid="55">
            <title>Sachkhere</title>Sachkhere</li>
          <li class="group" groupid="56">
            <title>Shuakhevi</title>Shuakhevi</li>
          <li class="group" groupid="57">
            <title>Sighnahi</title>Sighnahi</li>
          <li class="group" groupid="58">
            <title>SighnahiStefancminda</title>SighnahiStefancminda</li>
          <li class="group" groupid="15">
            <title>Stereo+</title>Stereo+</li>
          <li class="group" groupid="16">
            <title>Switches</title>Switches</li>
          <li class="group" groupid="64">
            <title>TBS Tuner TEST</title>TBS Tuner TEST</li>
          <li class="group" groupid="20">
            <title>TREDESS</title>TREDESS</li>
          <li class="group" groupid="59">
            <title>Talaxa</title>Talaxa</li>
          <li class="group" groupid="60">
            <title>Tbilisi</title>Tbilisi</li>
          <li class="group" groupid="1">
            <title>Templates</title>Templates</li>
          <li class="group" groupid="12">
            <title>Templates/Applications</title>Templates/Applications</li>
          <li class="group" groupid="13">
            <title>Templates/Databases</title>Templates/Databases</li>
          <li class="group" groupid="8">
            <title>Templates/Modules</title>Templates/Modules</li>
          <li class="group" groupid="19">
            <title>Templates/Network Devices</title>Templates/Network Devices</li>
          <li class="group" groupid="9">
            <title>Templates/Network devices</title>Templates/Network devices</li>
          <li class="group" groupid="10">
            <title>Templates/Operating systems</title>Templates/Operating systems</li>
          <li class="group" groupid="11">
            <title>Templates/Server hardware</title>Templates/Server hardware</li>
          <li class="group" groupid="14">
            <title>Templates/Virtualization</title>Templates/Virtualization</li>
          <li class="group" groupid="61">
            <title>Tianeti</title>Tianeti</li>
          <li class="group" groupid="62">
            <title>Tkhibuli</title>Tkhibuli</li>
          <li class="group" groupid="63">
            <title>Urta</title>Urta</li>
          <li class="group" groupid="6">
            <title>Virtual machines</title>Virtual machines</li>
          <li class="group" groupid="4">
            <title>Zabbix servers</title>Zabbix servers</li>
          <li class="group" groupid="68">
            <title>Templates</title>Templates</li>
          <li class="group" groupid="67">
            <title>.Templates - Cisco</title>.Templates - Cisco</li>
          <li class="group" groupid="23">
            <title>Abastumani</title>Abastumani</li>
          <li class="group" groupid="24">
            <title>Akhalcikhe</title>Akhalcikhe</li>
          <li class="group" groupid="25">
            <title>Akhalkalaki</title>Akhalkalaki</li>
          <li class="group" groupid="26">
            <title>Bakuriani</title>Bakuriani</li>
          <li class="group" groupid="27">
            <title>Batumi</title>Batumi</li>
          <li class="group" groupid="28">
            <title>Bolnisi</title>Bolnisi</li>
          <li class="group" groupid="29">
            <title>Borjomi</title>Borjomi</li>
          <li class="group" groupid="30">
            <title>Cageri</title>Cageri</li>
          <li class="group" groupid="31">
            <title>Calenjikha</title>Calenjikha</li>
          <li class="group" groupid="32">
            <title>Calka</title>Calka</li>
          <li class="group" groupid="33">
            <title>Chiatura</title>Chiatura</li>
          <li class="group" groupid="34">
            <title>Chkhorocku</title>Chkhorocku</li>
          <li class="group" groupid="35">
            <title>Civi</title>Civi</li>
          <li class="group" groupid="36">
            <title>Dedoflis Ckaro</title>Dedoflis Ckaro</li>
          <li class="group" groupid="5">
            <title>Discovered hosts</title>Discovered hosts</li>
          <li class="group" groupid="37">
            <title>Dmanisi</title>Dmanisi</li>
          <li class="group" groupid="38">
            <title>Dusheti</title>Dusheti</li>
          <li class="group" groupid="18">
            <title>ELBER</title>ELBER</li>
          <li class="group" groupid="39">
            <title>Godora</title>Godora</li>
          <li class="group" groupid="40">
            <title>Gori</title>Gori</li>
          <li class="group" groupid="41">
            <title>Gudauri</title>Gudauri</li>
          <li class="group" groupid="65">
            <title>HARRIS</title>HARRIS</li>
          <li class="group" groupid="21">
            <title>HeadEnd</title>HeadEnd</li>
          <li class="group" groupid="7">
            <title>Hypervisors</title>Hypervisors</li>
          <li class="group" groupid="42">
            <title>Jvari</title>Jvari</li>
          <li class="group" groupid="43">
            <title>Kaspi</title>Kaspi</li>
          <li class="group" groupid="44">
            <title>Keda</title>Keda</li>
          <li class="group" groupid="45">
            <title>Kharagauli</title>Kharagauli</li>
          <li class="group" groupid="46">
            <title>Khulo</title>Khulo</li>
          <li class="group" groupid="47">
            <title>Kojori</title>Kojori</li>
          <li class="group" groupid="48">
            <title>Kutaisi</title>Kutaisi</li>
          <li class="group" groupid="66">
            <title>Kvacxuti</title>Kvacxuti</li>
          <li class="group" groupid="49">
            <title>Kvareli</title>Kvareli</li>
          <li class="group" groupid="50">
            <title>Lentekhi</title>Lentekhi</li>
          <li class="group" groupid="2">
            <title>Linux servers</title>Linux servers</li>
          <li class="group" groupid="17">
            <title>MIKROTIK</title>MIKROTIK</li>
          <li class="group" groupid="51">
            <title>Martvili</title>Martvili</li>
          <li class="group" groupid="52">
            <title>Mravaldzali</title>Mravaldzali</li>
          <li class="group" groupid="53">
            <title>Nasper</title>Nasper</li>
          <li class="group" groupid="54">
            <title>Ninocminda</title>Ninocminda</li>
          <li class="group" groupid="55">
            <title>Sachkhere</title>Sachkhere</li>
          <li class="group" groupid="56">
            <title>Shuakhevi</title>Shuakhevi</li>
          <li class="group" groupid="57">
            <title>Sighnahi</title>Sighnahi</li>
          <li class="group" groupid="58">
            <title>SighnahiStefancminda</title>SighnahiStefancminda</li>
          <li class="group" groupid="15">
            <title>Stereo+</title>Stereo+</li>
          <li class="group" groupid="16">
            <title>Switches</title>Switches</li>
          <li class="group" groupid="64">
            <title>TBS Tuner TEST</title>TBS Tuner TEST</li>
          <li class="group" groupid="20">
            <title>TREDESS</title>TREDESS</li>
          <li class="group" groupid="59">
            <title>Talaxa</title>Talaxa</li>
          <li class="group" groupid="60">
            <title>Tbilisi</title>Tbilisi</li>
          <li class="group" groupid="1">
            <title>Templates</title>Templates</li>
          <li class="group" groupid="12">
            <title>Templates/Applications</title>Templates/Applications</li>
          <li class="group" groupid="13">
            <title>Templates/Databases</title>Templates/Databases</li>
          <li class="group" groupid="8">
            <title>Templates/Modules</title>Templates/Modules</li>
          <li class="group" groupid="19">
            <title>Templates/Network Devices</title>Templates/Network Devices</li>
          <li class="group" groupid="9">
            <title>Templates/Network devices</title>Templates/Network devices</li>
          <li class="group" groupid="10">
            <title>Templates/Operating systems</title>Templates/Operating systems</li>
          <li class="group" groupid="11">
            <title>Templates/Server hardware</title>Templates/Server hardware</li>
          <li class="group" groupid="14">
            <title>Templates/Virtualization</title>Templates/Virtualization</li>
          <li class="group" groupid="61">
            <title>Tianeti</title>Tianeti</li>
          <li class="group" groupid="62">
            <title>Tkhibuli</title>Tkhibuli</li>
          <li class="group" groupid="63">
            <title>Urta</title>Urta</li>
          <li class="group" groupid="6">
            <title>Virtual machines</title>Virtual machines</li>
          <li class="group" groupid="4">
            <title>Zabbix servers</title>Zabbix servers</li>
        </ul>
      </div>
    </div>
  </body>

</html>

Answer 1

您必须使用relative以外的其他位置，例如：

#groups {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 150px;
    overflow: auto;
    color: white;
}

通过这种方式，我们实际上为groups容器设置了高度（和宽度），溢出效果很好：

为了使溢出生效，块级容器必须具有设置的高度（高度或最大高度）或空格设置为nowrap。

也在JSFiddle上。

Answer 2

我知道使元素具有动态高度时可滚动的唯一方法是在父元素上添加display: flex。

如果仅将此属性添加到div #manager，它将按预期工作。

无法使具有动态高度的容器可滚动

2 个答案: