Question

我有一个简单的固定标题和全高内容区域的布局。在内容区域内，我有一个垂直对齐的div，除非添加了大量内容，否则它很好。

HTML：

<header><h1>Header</h1></header>
<div id="main">
    <div class="inner">
        <h2>Title</h2>
        <p>Lorem Ipsum</p>
        <!-- 
            <p>Everything goes horribly wrong when there's too much content.</p>
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p>
            <p>Everything goes horribly wrong when there's too much content.</p>
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p> 
            <p>Everything goes horribly wrong when there's too much content.</p> 

            ...
            ...
            ...

        -->
    </div>
</div>

CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

h1 {
    margin: 0;
    line-height: 40px;
    font-size: 1.75em;
}

header {
    text-align: center;
    text-transform: uppercase;
    background-color: blue;
    color: #222;
    padding: 20px 10px;
    height: 40px;
    position: fixed;
    width: 100%;
    z-index: 10;
}

#main {
    position: absolute;
    top: 80px;
    bottom: 0;
    width: 100%;
    height: calc(100% - 80px);
    overflow: scroll;
    background-color: red;
}

.inner {
    max-width: 800px;
    position: absolute;
    line-height: 150%;
    text-align: center;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    left: 0;
    right: 0;
    font-size: 1.25em;
    width: 100%;
    position: relative;
    background-color: green;
}

我想要发生的是内部div在存在大量内容时滚动，就好像转换和顶部属性已关闭一样。< / p>

我认为媒体查询不会起作用，因为断点取决于内容的长度。

提前致谢。

Answer 1

可能加入 max-height:100%; overflow:auto;对.inner有帮助吗？

https://jsfiddle.net/sdt3scdr/4/

垂直对齐的div在比视口高时不表现

1 个答案: