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

时间：2016-07-03 13:55:48

标签： html css overflow

我有固定位置的模态表格。

HTML： 

#app{
    width:100%;
    height: 100%;
    background:#f22;
}

.header {
    width: 100%;
    height: 70px;
    background-color: #263238;
}

#main {
    width: 100%;
    height: 100vh;
    background:#ccc;
}

我想在我的表单中使用可滚动内容（div class =“content”），但CSS属性溢出-y：滚动无法正常工作。滚动条出现但内容未隐藏。

CSS： 

<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>

演示：

jsfiddle

6 个答案:

答案 0 :(得分：0)

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

.content { height: 250px; }

答案 1 :(得分：0)

可以试试这段代码。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

答案 3 :(得分：0)

以像素而不是百分比设置高度，并将overflow属性设置为auto。如果您将高度设置为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;
}

从height:100&;删除content class。

答案 4 :(得分：0)

.content max-height: xx%;将为null的百分比（根本不起作用），因为height上指定了否 .box。

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

flex示例使用3个额外的css行（参见注释 / * here * /）：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

你好，有一个working fiddle

hope this help

相关问题
最新问题