Question

我试图为我的某个项目制作一个浮动菜单，但我无法按照自己的意愿使溢出工作，这让我感到疯狂，因为我知道我已成功之前这样做。

我的目标是让#preferencescontent div只延伸到#preferencesholder的下边缘，如果内容较大但仍然继续使用滚动。

这里是代码（下面的代码）：

<div class="lightbox" id="preferencesdiv">
    <div id="preferencesholder">
        <div class="sidemenu">
            <div id="deviceoverviewbutton" class="menuitem">Device overview</div>
            <div id="irulesbutton" class="menuitem">Defined iRules</div>
            <div id="certificatebutton" class="menuitem">Certificates</div>
            <div id="logsbutton" class="menuitem">Logs</div>
            <div id="preferencesbutton" class="menuitem">Preferences</div>
            <div id="helpbutton" class="menuitem">Help</div>
        </div>
        <div id="preferencescontent">
            <div id="helpcontent">
                <h2>Tips and tricks</h2>
                <h3>Filtering for pool members being down</h3>
                <p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
                <p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
            </div>
        </div>
    </div>
</div>

我发现了一些类似的问题，但无法让任何解决方案适合我。

Codepen示例：

https://codepen.io/anon/pen/WMvjRw

Answer 1

您使用过max-height：80％。哪个不是关于任何事情。所以在px中使用高度。就像我使用200px一样。然后当conten从你定义的高度

大时你可以使用滚动

div#preferencescontent {
  overflow-y: scroll;
  max-height: 200px;
  margin: 10px;
  width: 100%;
}

:root {
  --alternatetablecolor: #f9f9f9;
  --headerbackgroundcolor: #efefef;
  --headerfontcolor: #333;
  --bordercolor: #dddddd;
  --defaultfontcolor: #222;
}

.lightbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
}

div#preferencesholder {
  background: #fff;
  display: inline-block;
  text-align: left;
  max-height: 75%;
  max-width: 90%;
  overflow: hidden;
  padding: 0px;
  border: 1px #000 solid;
  -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  margin-top: 100px;
}
div#preferencescontent {
  overflow-y: scroll;
  max-height: 200px;
  margin: 10px;
  width: 100%;
}

div.sidemenu {
  background-color: var(--headerbackgroundcolor);
  width: 100%;
  text-align: center;
}

div.sidemenu div.menuitem {
  padding: 10px;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  margin: 0px -2px 0px -2px;
}

div.sidemenu div.menuitem img {
  max-height: 30px;
  vertical-align: middle;
}

div.menuitem:hover {
  background-color: #d0d0d0;
  cursor: pointer;
}

div#helpcontent {
  max-width: 550px;
  margin: 0 auto;
}

<div class="lightbox" id="preferencesdiv">
  <div id="preferencesholder">
    <div class="sidemenu">
      <div id="deviceoverviewbutton" class="menuitem">Device overview</div>
      <div id="irulesbutton" class="menuitem">Defined iRules</div>
      <div id="certificatebutton" class="menuitem">Certificates</div>
      <div id="logsbutton" class="menuitem">Logs</div>
      <div id="preferencesbutton" class="menuitem">Preferences</div>
      <div id="helpbutton" class="menuitem">Help</div>
    </div>
    <div id="preferencescontent">
      <div id="helpcontent">
        <div id="helpcontent">
          <h2>Tips and tricks</h2>
          <h3>Filtering for pool members being down</h3>
          <p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
          <p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
          <h3>Filtering for pool members being down</h3>
          <p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
          <p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
                    <h3>Filtering for pool members being down</h3>
          <p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
          <p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
                    <h3>Filtering for pool members being down</h3>
          <p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
          <p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
                    <h3>Filtering for pool members being down</h3>
          <p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
          <p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
        </div>
      </div>
    </div>
  </div>

Div不断溢出容器边界

1 个答案: