首页 / 技术问答 / Html问答列表 / 问答详情

Html 高度：适合内容不拉伸以适合内部长度

我不是css专家，所以请原谅我.我正在try 做一个定制的下拉列表，它的高度可以动态地适应li的数字.我当前的代码不适合li，即使下拉高度设置为fit-content.我怎么才能解决这个问题呢？

EDIT:我没有使用min-height属性，因为我希望无论内容包含2个li还是50个li，都能无缝匹配

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%x;
  height: 90px;
  background-color: green;
}

.dropdownCon {
  display: flex;
  flex-direction: column;
  height: 50px;
}

.dropdownBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  font-weight: 600;
  font-family: sans-serif;
  color: #ffffff;
  padding: 11px 23px 11px 23px;
  background-color: #121212;
  border-radius: 5px;
  border: 1px solid #ffffff;
  cursor: pointer;
}

.dropdown {
  width: 100%;
  height: fit-content;
  max-height: 250px;
  overflow-y: auto;
  background-color: blue;
}

.dropdown ul {
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
}

.dropdown ul li {
    display: flex;
    column-gap: 10px;
    align-items: center;
    width: 100%;
    height: 30px;
    font-size: 16px;
    font-weight: 500;
    font-family: sans-serif;
    color: #ffffff;
    border-bottom: 1px solid #c1c1c1;
    cursor: pointer;
}
<div class="wrapper">
  <div class="dropdownCon">
    <div class="dropdownBtn">
      dropdown
    </div>
    <div class="dropdown">
      <ul>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
      </ul>
    </div>
  </div>
</div>

推荐答案

编辑:我删除了第一个解决方案，因为它没有回答问题.此外，根据对此答案的 comments ，我在底部添加了一个改进的解决方案.

如果你想保留滚动条，你应该将下拉菜单设置为某个最小的数字高度，这样它就不会被挤压.fit-content不起作用，因为overflow-y: auto让它假设最小的高度，使它可以滚动，如果这是有意义的话.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%x;
  height: 90px;
  background-color: green;
}

.dropdownCon {
  display: flex;
  flex-direction: column;
  height: 50px;
}

.dropdownBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
  font-weight: 600;
  font-family: sans-serif;
  color: #ffffff;
  padding: 11px 23px 11px 23px;
  background-color: #121212;
  border-radius: 5px;
  border: 1px solid #ffffff;
  cursor: pointer;
}

.dropdown {
  width: 100%;
  min-height: 100px;
  overflow-y: auto;
  background-color: blue;
}

.dropdown ul {
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
}

.dropdown ul li {
    display: flex;
    column-gap: 10px;
    align-items: center;
    width: 100%;
    height: 30px;
    font-size: 16px;
    font-weight: 500;
    font-family: sans-serif;
    color: #ffffff;
    border-bottom: 1px solid #c1c1c1;
    cursor: pointer;
}
<div class="wrapper">
  <div class="dropdownCon">
    <div class="dropdownBtn">
      dropdown
    </div>
    <div class="dropdown">
      <ul>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
      </ul>
    </div>
  </div>
</div>

一百零九 根据您的 comments ，这里有一个更好的建议:根本不要对下拉容器本身设置min-height或overflow.相反，在实际的<ul>上设置overflow-y: auto.这样，它从让<ul>与其内容的高度匹配开始，您可以使用max-height配置最大高度.查看下面的代码片段，您将看到<ul>‘S的最大高度被控制为max-height，但除此之外，它正好符合其内容.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%x;
  height: 90px;
  background-color: green;
}

.dropdownCon {
  display: flex;
  flex-direction: column;
  height: 50px;
}

.dropdownBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
  font-weight: 600;
  font-family: sans-serif;
  color: #ffffff;
  padding: 11px 23px 11px 23px;
  background-color: #121212;
  border-radius: 5px;
  border: 1px solid #ffffff;
  cursor: pointer;
}

.dropdown {
  width: 100%;
/*   min-height: fit-content;
  overflow-y: auto; */
  background-color: blue;
}

.dropdown ul {
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
    /* SEE HERE */
    overflow-y: auto;
    max-height: 100px;
}

.dropdown ul li {
    display: flex;
    column-gap: 10px;
    align-items: center;
    width: 100%;
    height: 30px;
    font-size: 16px;
    font-weight: 500;
    font-family: sans-serif;
    color: #ffffff;
    border-bottom: 1px solid #c1c1c1;
    cursor: pointer;
}
<div class="wrapper">
  <div class="dropdownCon">
    <div class="dropdownBtn">
      dropdown
    </div>
    <div class="dropdown">
      <ul>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
      </ul>
    </div>
  </div>
</div>

Html相关问答推荐

HTML5章节或文章

在 bootstrap 中的弹性项之间添加连接行

Angular 15 p-对话框不使用组件 Select 器呈现HTML

嵌套表列高度不是100%高度的问题

具有可展开行的棱角material 表(垫子表)，折叠时行之间仍有间隙

Tailwind CSS：overflow-y Property Not Scrolling Unreliably to Bottom with top-[63px]

我怎样才能有一个div，在其中放置一个消息，打破和不go 的div？

在弹性框布局中的第n个元素后强制换行

在R中从网页上的特定iframe中提取图形数据

如何显示自定义按钮以将产品添加到WooCommerce购物车？

为什么字体大小而不是 colored颜色 属性适用于元素？

rmarkdown HTML数字不适用于针织衫_1.44

视频重新加载而不是在 Swift 中暂停 WKWebView

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

这两个CSS中的网格居中对齐内部盒子有什么区别？

对齐页面左侧的单选按钮

提交前的验证表单未显示任何验证消息？

在部分而不是正文中定义页面宽度

如何阻止网格项目拉伸？

是否可以在换行时向锚标记添加填充？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630