css 上下div之间div的动态高度

rryofs0p 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(178)

我有这样的结构：

.div1 {
  display: block;
  width: 304px;
  margin-top: 83px;
  margin-left: 48px;
  margin-right: 48px;
  background-color: cadetblue;
  text-align: center;
}

.button-container {
  display: flex;
  width: 304px;
  margin-left: 48px;
  margin-right: 48px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.div2 {
  display: block;
  position: absolute;
  bottom: 24px;
  height: 105px;
  width: 304px;
  margin-left: 48px;
  margin-right: 48px;
  box-sizing: border-box;
}

button.item {
  text-transform: none;
  margin-top: 20px;
  width: 200px;
  height: 50px;
}

<div class="div1">Dynamic Height</div>
<div class="button-container">
  <button class="item">Button 1</button>
  <button class="item ">Button 2</button>
</div>
<div class="div2">Fixed Height</div>

规则：

1..div1具有动态高度，取决于内容（可以是文本）。
1.然后.div2是固定高度的，它总是粘在父容器的底部（可以是其他的div）。
1.然后button-container包含动态数量的按钮。
考虑到.div1可以改变它的高度，如何制作合适的CSS，使按钮容器的高度总是在.div1的底部和.div2的顶部之间？
如何使所有的按钮项目总是在H：中心W：中心的按钮容器，无论他们是多少？

css

来源：https://stackoverflow.com/questions/76347193/dynamic-height-of-div-between-top-and-bottom-div

1条答案

按热度按时间

xzv2uavs1#

我建议您从.div2中删除position: absolute，并使用CSS Grid作为div的容器。
这允许您将固定大小的元素放置在容器的底部，而不会改变或阻碍其他div：

/* First child will have height set to 'auto', second child will have height set to 105px */
.grid-container {
    display: grid;
    grid-template-rows: auto 105px;
}

<div class="grid-container">
    <div> <!-- This div has the height of the container minus 105px -->
        <div class="div1">Dynamic Height</div>
        <div class="button-container">
            <button class="item">Button 1</button>
            <button class="item ">Button 2</button>
        </div>
    </div>
    <div class="div2">Fixed Height</div> <!-- This div has height 105px -->
</div>

您还可以将min-height设置为.grid-container，以更好地适应网页中的内容，例如min-height: 100vh以适应整个屏幕。
对于居中按钮，您已经通过将align-items: center和justify-content: center;添加到.button-container完成了这一操作。
但我建议您额外添加flex-wrap: wrap，它可以防止按钮在容器两侧溢出。

赞(0）回复(0）举报 2023-05-30

我来回答

css 上下div之间div的动态高度

1条答案

相关问题

热门标签

最新问答