在垂直居中的div上垂直滚动并具有动态高度

Question

我使用display:table和vertical-align:middle以动态高度垂直放置div居中。

的CSS

.table {
  display:table;
  height: 100%;
  width: 100%;
}

.cell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

.content {
    display: inline-block;
    width: 100px;
    overflow-y: auto; /* Useless */
}

的HTML

<div class="table">
    <div class="cell">
        <div class="content">
            Then this text becomes too long, it will cause
            the .table div to expand beyond its container
            even if set to height: 100%
        </div>
    </div>
</div>

当content div的高度变得大于table div（或更确切地说是table div的父级）时，如何获取content div以获得垂直滚动？

JS小提琴示例

Answer 1

除了使用CSS表方法外，还可以在未知方法中使用居中 ：

.cell, .cell:before {
  height: 100%;
}
.cell:before {
  content: '';
  margin-right: -0.25em; /* Adjusts for spacing */
}
.cell:before, .cont {
  vertical-align: middle;
  display: inline-block;
}
.cont {
  max-height: 100%;
  overflow-y: auto;
}

 .margin { position: absolute; left: 32px; right: 32px; top: 32px; bottom: 32px; background: yellow; text-align: center; } .cell, .cell:before { height: 100%; } .cell:before { content: ''; margin-right: -0.25em; /* Adjusts for spacing */ } .cell:before, .cont { vertical-align: middle; display: inline-block; } .cont { width: 240px; padding: 0px 12px; background: #ddd; text-align: left; border: 1px solid #000; max-height: 100%; overflow-y: auto; } 

 <div class="margin"> <div class="cell"> <div class="cont"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p> </div> </div> </div> 

Answer 2

您可以添加.row元素：

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="content">Long text</div>
        </div>
    </div>
</div>

使用此CSS：

.table {
  display: table;
  height: /* something */;
}
.row {
    display: table-row;
    height: 100%;
}
.cell {
    display: table-cell;
    height: 0;
}
.cont {
    max-height: 100%;
    overflow-y: auto;
}

这会尽可能降低.cell的高度（使.cont溢出），但是由于.row height: 100% ，因此它将覆盖.table 。

 .margin { position: absolute; left: 32px; right: 32px; top: 32px; bottom: 32px; background: yellow; } .table { display: table; width: 100%; height: 100%; } .row { display: table-row; height: 100%; } .cell { display: table-cell; vertical-align: middle; text-align: center; height: 0; } .cont { width: 240px; padding: 0px 12px; background: #ddd; display: inline-block; text-align: left; border: 1px solid #000; max-height: 100%; overflow-y: auto; } 

 <div class="margin"> <div class="table"> <div class="row"> <div class="cell"> <div class="cont"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p> </div> </div> </div> </div> </div> 

Answer 3

扩展到容器之外的不是.table div。 这是.cont div。

.cont {
    width: 240px;
    padding: 0px 12px;
    background: #ddd;
    display: inline-block;
    text-align: left;
    border: 1px solid #000;
    overflow:auto;
}

此类中没有任何东西将高度限制为100％，因此.cont div将扩展到.table的边界之外

只需添加max-heigh:100%即可将其限制为父级（.cell）高度的100％。 然后， overflow:auto （已经存在）应该完成其余的工作

http://jsfiddle.net/0q78gbvh/1/

编辑：这将不适用于所有浏览器，因为您不能直接在这些浏览器中设置display：table的最大高度。

Answer 4

实现相同效果的另一种方法是使用display: flex而不是display: table

 .flex { position:absolute; left:32px; right:32px; top:32px; bottom:32px; display: flex; align-items: center; justify-content: center; background:yellow; } .item { max-height: 100%; box-sizing: border-box; width: 264px; padding: 0px 12px; background: #ddd; border: 1px solid #000; overflow:auto; } 

 <div class="flex"> <div class="item"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p> </div> </div> 

该功能适用​​于Chrome（v39），Firefox（v36）和IE11。 但是，即使添加了滚动条，IE11似乎也不会重新生成div item 。

Answer 5

这是你想要的？

由于您在jsFiddle Eg中具有<p>元素，因此将容器的最大高度设置为等于.margin

.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
max-height:300px; /* Fixed max-height of container... */
overflow-y:scroll;
}

JSFiddle示例