仅从下方扩展 div 元素[重复]答案

【问题标题】：Expanding a div element only from below [duplicate]仅从下方扩展 div 元素[重复]
【发布时间】：2021-12-20 00:34:10
【问题描述】：

我想知道是否可以扩展一个 div，该 div 位于中心，仅在添加新元素时从下方使用 justify-content: center; 和 align-items: center;。

const items = document.getElementById('items');

const add = () => {
  const newItem = document.createElement('div');
  newItem.innerText = 'Item';
  items.append(newItem);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container{
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
}

<div id="body">
  <div id="container">
    <button onClick='add()'>Add item</button>  
    <div id="items"></div>
  </div>
</div>

如您所见，元素使其从上方和下方扩展。我想做的只是从下面展开。

【问题讨论】：

移除 justify-content 和 align-items 然后应用 margin:auto 到子元素

标签： html css flexbox

【解决方案1】：

在这种情况下，由于您知道元素的宽度及其最小高度，我会忘记 flex，而是将容器相对于其父级定位，您可以使用 CSS calc 函数对任何视口执行此操作。

因此，无论其高度增加多少，容器的顶部都将保持在其父级内的固定位置。

const items = document.getElementById('items');

const add = () => {
  const newItem = document.createElement('div');
  newItem.innerText = 'Item';
  items.append(newItem);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body {
  height: 100vh;
  width: 100vw;
  position: relative;
}

#container {
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
  position: relative;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  display: inline-block;

}

<div id="body">
  <div id="container">
    <button onClick='add()'>Add item</button>
    <div id="items"></div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以将其包装在一个 div 中并调整它们的属性：

const items = document.getElementById('items')

const add = () => {
  const newItem = document.createElement('div')
  newItem.innerText = 'Item'
  items.append(newItem)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  position: absolute;
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
}

#outer {
  /* the same min-height as #container */
  min-height: 200px;
  position: relative;
  display: flex;
  justify-content: center;
}

<div id="body">
  <div id="outer">
    <div id="container">
      <button onClick="add()">Add item</button>
      <div id="items"></div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

这种行为并不奇怪，也是正确的。在我看来，您应该使用盒子的固定垂直定位。比如这样：

const add = () => {
  const newItem = document.createElement('div');
  newItem.innerText = 'Item';
  items.append(newItem);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 10%;
}

#container{
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
}

<div id="body">
  <div id="container">
    <button onClick='add()'>Add item</button>  
    <div id="items"></div>
  </div>
</div>

【讨论】：