CSS中的固定位置和溢出滚动答案

【问题标题】：Fixed position and overflow scroll in CSSCSS中的固定位置和溢出滚动
【发布时间】：2016-11-05 08:31:32
【问题描述】：

我有固定位置的模态形式。

HTML：

<div class="wrap">
  <div class="box">
    <div class="header">
      Form header
    </div>
    <div class="content">
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content
    </div>
  </div>
</div>

我想在我的表单中包含可滚动的内容 (div class="content")，但 CSS 属性 overflow-y: scroll 无法正常工作。滚动条出现，但内容未隐藏。

CSS：

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.box {
  position: fixed;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  max-height: calc(100% - 50px);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}

.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  max-height: 100%;
  overflow-y: scroll;
}

演示：

jsfiddle

【问题讨论】：

请查看此链接，它会对您有所帮助codepen.io/nehemc/pen/ZOyGOB
谢谢，固定高度可以正常工作，但我想让内容高度动态化。如果内容超过 100% - 必须出现 50px 滚动
codepen.io/nehemc/pen/ZOyGOB
.content { 最小高度：30vh;最大高度：60vh； } 你可以调整高度的值

标签： html css overflow

【解决方案1】：

您可以使用flexbox，它适用于标题和内容区域的动态高度。

将容器设置为display: flex; flex-direction: column;，将内容设置为flex: 1;，使其展开以占用除标题之外的所有可用空间。

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.box {
  position: fixed;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  max-height: calc(100% - 50px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}
.content {
  flex: 1;
  padding: 10px;
  border-top: 1px solid #ddd;
  overflow-y: auto;
}

<div class="wrap">
  <div class="box">
    <div class="header">
      Header
    </div>
    <div class="content">
      <div style="height:2000px;">Content</div>
    </div>
  </div>
</div>

jsFiddle

【讨论】：

谢谢！ Flexbox 这就是我需要的！

【解决方案2】：

将.content 类更改为固定值height 而不是max-height 的百分比似乎可以解决问题，例如：

.content { height: 250px; }

【讨论】：

我知道固定高度滚动工作正常，但我需要动态高度内容的表单。

【解决方案3】：

.content max-height: xx%; 将是 null 的 %（根本无效），因为 no height 是在 .box 上指定的。

您可以使用 flex 或重新考虑结构和居中方法（多种方式）。

flex 示例使用 3 行额外的 css (see cmets /* here */ ):

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.box {
  position: fixed;
  display: flex;/* here */
  flex-flow: column;/* here */
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  max-height: calc(100% - 50px);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}
.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  flex: 1;/* here */
  overflow-y: scroll;
}

<div class="wrap">
  <div class="box">
    <div class="header">
      Form header
    </div>
    <div class="content">
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content
    </div>
  </div>
</div>

【讨论】：

谢谢！ Flexbox 这就是我需要的！

【解决方案4】：

可以试试这个代码。

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.box {
  position: fixed;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  max-height: calc(100% - 50px);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

}

.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}

.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  min-height: 30vh;
  max-height: 60vh;
  overflow-y: scroll;
  background:#fff;
}

<div class="wrap">
  <div class="box">
    <div class="header">
      Form header
    </div>
    <div class="content">
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content
    </div>
  </div>
</div>

【讨论】：

【解决方案5】：

你好，有一个working fiddle

hope this help

【讨论】：

【解决方案6】：

以像素而不是百分比为单位设置高度，并将溢出属性设置为自动。如果您将高度设置为100%，那么 div 将根据内容垂直增长，要解决此问题，您必须以像素为单位设置高度。 Overflow:auto; 将在高度固定时自动提供滚动条。像这样：

.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  max-height: 200px;
  overflow: auto;
}

如果您需要动态内容高度，请尝试以下代码并使用它：

.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  min-height:200px;
  max-height:100%;
  position: fixed;
  overflow:auto;
  background-color:white;
}

最好的解决方案是使用 flexbox。添加以下属性：

.box
{
  display:flex;
  flex-flow:column;
} 
.content
{
flex: 1;
}

从content class 中删除height:100&;。

【讨论】：