html - 在 div 中创建表单并尝试将内容保留在其中

Question

我一直在尝试让这种格式正常工作。我找到了很多我想要的非常接近的例子，但我似乎无法做到这一点。

我正在尝试创建一个可以通过 JS “弹出”以供某人填写的表单。我对 JS 和其他样式没有任何问题，因此我已将其简化为最基本的示例，我仍然可以说明我的内容我正在尝试做。

我有一个标题区域，其中包含要填写的“名称”和“描述”，最重要的是，可以动态添加一些其他字段。标题区域可能会增长一两个字段，因此高度不确定。我希望表单的其余部分（可滚动列表）根据标题的添加内容增长或缩小。

我已经阅读了很多答案/建议并尝试过 display:flex; 显示：表格；和显示：网格；我所做的一切似乎都无法正常工作。

我想我只是错过了一些小东西（或没有），我现在不知所措，花了几天时间试图完成这个表格。

这是我没有尝试过的基本表单，我想做的就是在“容器”的剩余空间内拥有“表单详细信息”滚动。我知道如果我对高度进行硬编码，我可以让它工作，但是，正如我上面所说，这也可以将额外的内容动态添加到“form-header”，所以“form-header”的高度不是已知。

本质上，我只需要粉色区域保持在绿色区域内（并滚动），并具有动态的蓝色区域高度（两个可选字段可能会隐藏和显示，具体取决于...）。

这是CSS

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
}
.title {
   margin-top:5px;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
}

这是HTML

<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </form>
</div>

小提琴：（https://jsfiddle.net/logan5_42/nz418o9d/14/）

Answer 1

如果要使用容器的剩余高度，可以使用以下方式：

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
   overflow: hidden;
   display: table;
}
form {
  display: table-row-group;
   height: 100%;
}
.title {
   margin-top:5px;
   display: table-row;
   width: 100%;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
   display: table-row;
    width: 100%;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
   display: table-row;
    width: 100%;
    height: 100%;
}
.content-wrapper {
  width:100%;
  height:100%;
  position:relative;
}

.content {
  overflow-y:auto;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
    <div class="content-wrapper">
      <div class="content">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      </div>
    </div>

    </div>
  </form>
</div>

Answer 2

添加overflow-y: auto;到.container

Answer 3

您只需要更改容器类的 CSS，保持这样

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
   overflow-y: scroll;
}

我添加了几行以防万一您不喜欢默认滚动条，您也可以轻松地对其进行自定义，来吧..

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

Answer 4

从容器类中删除 height:400px 并添加 min-height ，如下所示。看起来这可以帮助您解决问题。

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   min-height: 200px;
   background-color: lightgreen;
   text-align: center;
}
.title {
   margin-top:5px;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
}

<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </form>
</div>

Answer 5

我更改了您的演示并修复了它；您必须添加overflow: hidden到container并将静态添加height到form-detail.

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
   overflow: hidden;
}
.title {
   margin-top:5px;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
   height: 140px;
}

<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </form>
</div>