Question

我有一个滑出菜单，当打开到顶部时绝对定位：0，底部：0，右：0，宽度为480px。它包含一些标题行的文本。在它下面它包含一些动态创建的Option行（可以是1到100行）。在那下面是一个带有两个按钮的页脚行。

我要做的是：

将标题设为静态，使其不滚动。
使按钮行静止，以便始终在页面底部显示
使带有选项的容器具有y滚动，并且它的高度始终占用可用的剩余空间（窗口高度 - 标题行的高度，减去按钮行高度）

我正在寻找一个全css解决方案（没有js / jquery）。我只需要支持现代浏览器（ie，chrome，firefox的最后两个版本）。

<body>
  <div>
    <div class='configuration-drawer-container configuration-drawer-container-open'>
      <div class="configuration-drawer-body">
        <div class="configuration-drawer-content">
          <div class="title-row-wrapper">
            <div class="title">
              Dashboard Configuration
            </div>
            <div>
            <p>
              Select the data tiles you want displayed on the PM Dashboard.
            </p>
            <p>
              <span>Note:</span>
              Dashboard configurations are shared across all workspaces of the same type.  Changes to the configuration will affect other workspaces.
            </p>
            <p>
              Select up to five rows
            </p>
          </div>
          </div>
          <div class='data-box-row-wrapper'>
            <div class="configuration-drawer-data-box-row" >
              Option 1
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 2
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 3
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 4
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 5
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 6
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 7
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 8
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 9
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 10
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 11
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 12
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 13
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 14
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 15
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 16
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 17
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 18
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 19
            </div>
            <div class="configuration-drawer-data-box-row" >
              Option 20
            </div>
          </div>
          <div class="button-wrapper">
            <div class="cancel" >
              Close
            </div>
            <div class="save">
              Save
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>


body {
  background-color: gray;
  height: 100%;
  overflow-y: hidden;
}

.configuration-drawer-container {
    background-color: #fff;
    bottom: 0;
    color: #333;
    font-size: 15px;
    font-weight: 300;
    height: 100vh;
    padding: 24px 24px 0 24px;
    position: absolute;
    top: 0;
    z-index: 9998;
}

.configuration-drawer-container-open {
    height: 100vh;
   /*overflow-y: auto;*/
    visibility: visible;
    width: 480px;
    right: 0;
}

.configuration-drawer-body {
  min-height: 100%;
    position: relative;
}

.configuration-drawer-content {
    position: relative;
    height: 100%;

     heigth: calc(100vh - 500px);
     overflow: auto;
    /* padding-bottom: 90px; */
}

.title-row-wrapper {
    margin-bottom: 24px;
    position: relative;
    width: 100%;
}

.title {
    color: #333;
    display: inline;
    font-size: 20px;
    font-weight: 500;
}

.data-box-row-wrapper {
  overflow-y: auto;
  background-color: light-gray;
  border: 1px red solid;
}

.configuration-drawer-data-box-row {
    align-items: center;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    height: 48px;
    text-align: left;
}

.button-wrapper {
    padding: 24px 0;
}

.cancel {
    color: #007ec2;
    margin-right: 16px;
    padding: 0 8px 0 8px;
    border: 1px solid black;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    line-height: 36px;
    min-width: 64px;
    text-align: center;
    vertical-align: middle;
}

.save {
    color: #007ec2;
    margin-right: 16px;
    padding: 0 8px 0 8px;
    border: 1px solid black;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    line-height: 36px;
    min-width: 64px;
    text-align: center;
    vertical-align: middle;
}

这是我的代码：

https://codepen.io/johnsontroye/pen/XVdyGN?editors=1100

Answer 1

flexbox将是一个很好的解决方案。如果您将容器设置为显示flex，使用flex-direction: column;，flex项将填充可用空间，这将设置容器，然后您需要将overflow: auto;应用于要滚动的元素当内容溢出时

codepen示例：https://codepen.io/tylerfowle/pen/qpNrvJ

这是一个如何工作的简化示例

.offcanvas-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: lightgrey;
}

.title {
  background: grey;
  padding: 20px;
}

.list-container {
  overflow: auto;
}

.list-item {
  padding: 10px;
}

.footer {
  display: flex;
  background: grey;
  padding: 20px;
}

<div class='offcanvas-container'>
  <div class='title'>Dashboard Configuration</div>
  <div class='list-container'>
    <div class='list-item'>1 - List item</div>
    <div class='list-item'>2 - List item</div>
    <div class='list-item'>3 - List item</div>
    <div class='list-item'>4 - List item</div>
    <div class='list-item'>5 - List item</div>
    <div class='list-item'>6 - List item</div>
    <div class='list-item'>7 - List item</div>
    <div class='list-item'>8 - List item</div>
    <div class='list-item'>9 - List item</div>
    <div class='list-item'>10 - List item</div>
    <div class='list-item'>11 - List item</div>
    <div class='list-item'>12 - List item</div>
    <div class='list-item'>13 - List item</div>
    <div class='list-item'>14 - List item</div>
    <div class='list-item'>15 - List item</div>
    <div class='list-item'>16 - List item</div>
    <div class='list-item'>17 - List item</div>
    <div class='list-item'>18 - List item</div>
    <div class='list-item'>19 - List item</div>
    <div class='list-item'>20 - List item</div>
    <div class='list-item'>21 - List item</div>
    <div class='list-item'>22 - List item</div>
    <div class='list-item'>23 - List item</div>
    <div class='list-item'>24 - List item</div>
    <div class='list-item'>25 - List item</div>
    <div class='list-item'>26 - List item</div>
    <div class='list-item'>27 - List item</div>
    <div class='list-item'>28 - List item</div>
    <div class='list-item'>29 - List item</div>
    <div class='list-item'>30 - List item</div>
    <div class='list-item'>31 - List item</div>
    <div class='list-item'>32 - List item</div>
    <div class='list-item'>33 - List item</div>
    <div class='list-item'>34 - List item</div>
    <div class='list-item'>35 - List item</div>
    <div class='list-item'>36 - List item</div>
    <div class='list-item'>37 - List item</div>
    <div class='list-item'>38 - List item</div>
    <div class='list-item'>39 - List item</div>
    <div class='list-item'>40 - List item</div>
    <div class='list-item'>41 - List item</div>
    <div class='list-item'>42 - List item</div>
    <div class='list-item'>43 - List item</div>
    <div class='list-item'>44 - List item</div>
    <div class='list-item'>45 - List item</div>
    <div class='list-item'>46 - List item</div>
    <div class='list-item'>47 - List item</div>
    <div class='list-item'>48 - List item</div>
    <div class='list-item'>49 - List item</div>
    <div class='list-item'>50 - List item</div>
    <div class='list-item'>51 - List item</div>
    <div class='list-item'>52 - List item</div>
    <div class='list-item'>53 - List item</div>
    <div class='list-item'>54 - List item</div>
    <div class='list-item'>55 - List item</div>
    <div class='list-item'>56 - List item</div>
    <div class='list-item'>57 - List item</div>
    <div class='list-item'>58 - List item</div>
    <div class='list-item'>59 - List item</div>
    <div class='list-item'>60 - List item</div>
  </div>
  <div class='footer'>
    <div class='button'>save</div>
    <div class='button'>close</div>
  </div>
</div>

Answer 2

您可以使用calc()。

.data-box-row-wrapper {
  height: calc(100vh - (24px + 24px + 24px + 24px + 125px + 38px + 24px + 24px));
}

或

.data-box-row-wrapper {
  height: calc(100vh - 283px);
}

283是静态截面高度的总和，包括它们的填充和边距。

body {
  background-color: gray;
  height: 100%;
  overflow-y: hidden;
}

.configuration-drawer-container {
  background-color: #fff;
  bottom: 0;
  color: #333;
  font-size: 15px;
  font-weight: 300;
  height: 100vh;
  padding: 24px 24px 0 24px;
  position: absolute;
  top: 0;
  z-index: 9998;
}
.data-box-row-wrapper {
  height: calc(100vh - (24px + 24px + 24px + 24px + 125px + 38px + 24px + 24px));
}
.configuration-drawer-container-open {
  height: 100vh;
  /*overflow-y: auto;*/
  visibility: visible;
  width: 480px;
  right: 0;
}

.configuration-drawer-body {
  min-height: 100%;
  position: relative;
}

.configuration-drawer-content {
  position: relative;
  height: 100%;
  heigth: calc(100vh - 500px);
  overflow: auto;
  /* padding-bottom: 90px; */
}

.title-row-wrapper {
  margin-bottom: 24px;
  position: relative;
  width: 100%;
}

.title {
  color: #333;
  display: inline;
  font-size: 20px;
  font-weight: 500;
}

.data-box-row-wrapper {
  overflow-y: auto;
  background-color: light-gray;
  border: 1px red solid;
}

.configuration-drawer-data-box-row {
  align-items: center;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  height: 48px;
  text-align: left;
}

.button-wrapper {
  padding: 24px 0;
}

.cancel {
  color: #007ec2;
  margin-right: 16px;
  padding: 0 8px 0 8px;
  border: 1px solid black;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  line-height: 36px;
  min-width: 64px;
  text-align: center;
  vertical-align: middle;
}

.save {
  color: #007ec2;
  margin-right: 16px;
  padding: 0 8px 0 8px;
  border: 1px solid black;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  line-height: 36px;
  min-width: 64px;
  text-align: center;
  vertical-align: middle;
}

<body>
  <div>
    <div class='configuration-drawer-container configuration-drawer-container-open'>
      <div class="configuration-drawer-body">
        <div class="configuration-drawer-content">
          <div class="title-row-wrapper">
            <div class="title">
              Dashboard Configuration
            </div>
            <div>
              <p>
                Select the data tiles you want displayed on the PM Dashboard.
              </p>
              <p>
                <span>Note:</span> Dashboard configurations are shared across all workspaces of the same type. Changes to the configuration will affect other workspaces.
              </p>
              <p>
                Select up to five rows
              </p>
            </div>
          </div>
          <div class='data-box-row-wrapper'>
            <div class="configuration-drawer-data-box-row">
              Option 1
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 2
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 3
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 4
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 5
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 6
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 7
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 8
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 9
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 10
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 11
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 12
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 13
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 14
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 15
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 16
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 17
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 18
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 19
            </div>
            <div class="configuration-drawer-data-box-row">
              Option 20
            </div>
          </div>
          <div class="button-wrapper">
            <div class="cancel">
              Close
            </div>
            <div class="save">
              Save
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

带静态页脚的动态div高度（仅限css）

2 个答案: