小贝子编程

带有静态页脚的动态DIV高度(仅CSS)



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

我要做的是：

  1. 使标题静态，以免滚动。
  2. 使按钮行静态，因此在页面底部总是可见
  3. 使带有选项的容器具有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;
}

这是我的Codepen：

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

您可以使用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>

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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium