Question

是否有一个干净的html / css-only方法来拉伸滚动父级内的容器以匹配其子级超出父级大小时的子级？如果没有，那么在Javascript中实现这一目标的最快方法是什么？

请注意容器的边框如何停在父级的底部边缘，而子级继续经过该边缘。我希望孩子们定义容器的高度，同时仍保留父级的滚动区域。

感谢您的帮助！

＆＃13;

body {
  background-color: #a8a8a8;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding:0;
  position: absolute;
}

.header {
  background-color: #666666;
  width: 100%;
  height: 50px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  flex: 0 0 auto;
  z-index: 10;
}

.header2 {
  background-color: #ededed;
  width: 100%;
  height: 75px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  flex: 0 0 auto;
  z-index: 9;
}

.footer {
  flex: 0 0 auto;
  height: 20px;
  background-color: black;
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 -3px 6px rgba(0, 0, 0, 0.23);
}

.columns, .columns_header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-grow: 1;
}

.columns_header {
  background-color: black;
  min-height: 30px;
  flex: 0 0 auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 1;
}

.column_title {
  padding: 3px 0 3px;
  text-align: center;
  width: 100%;
  font-weight: bold;
  color: white;
  border-right: 1px solid #a8a8a8;
}

.column_title:last-child {
  border-right: 27px solid black;
}

.column_title:first-child {
  border-left: 10px solid black;
}

.columns {
  background-color: #ededed;
  overflow-y: scroll;
}

.column {
  padding: 10px;
  border-right: 1px solid #666666;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.column:last-child {
  border-right: 10px solid #666666;
}

.column:first-child {
  border-left: 10px solid #666666;
}

.activity {
  height: auto;
  width: 100%;
  border: 1px solid #666666;
  background-color: white;
  border-radius: 6px;
  min-height: 200px;
  margin-bottom: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

＆＃13;

<body class="">

  <div class="header">

  </div>


  <div class="header2">

  </div>

  <div class="columns_header">

    <div class="column_title">
    </div>

    <div class="column_title">
    </div>

    <div class="column_title">
    </div>

    <div class="column_title">
    </div>

    <div class="column_title">
    </div>

  </div>


  <div class="columns">

    <div class="column">

      <div class="activity">
      </div>

      <div class="activity">
      </div>

      <div class="activity">
      </div>

      <div class="activity">
      </div>

      <div class="activity">
      </div>

      <div class="activity">
      </div>

      <div class="activity">
      </div>

      <div class="activity">
      </div>

      <div class="activity">
      </div>

    </div>

    <div class="column">
    </div>

    <div class="column">
    </div>

    <div class="column">
    </div>

    <div class="column">
    </div>

  </div>

  <div class="footer">

  </div>

</body>

＆＃13;

在滚动父级内部拉伸容器，以在子级超出父级边界时匹配其子级

0 个答案: