Question

试图让流体高度模态工作并遇到一些障碍。我的父对象高度为70％，我试图让内容高度超过其父级的100％，但仍然存在溢出问题。以下是代码和jsfiddle任何帮助表示赞赏：）

CSS

html {
height: 100%;
min-height: 100%;
}
body {
    height: 100%;
}
.modal {
    position: fixed;
    top: 15%;
    left: 5%;
    width: 90%;
    height: 70%;
    background: #b10000;
    display: block;
    .modalWrapper {
        position: relative;
        height: 100%;
        .modalHeader {
            width: 100%;
            height: 45px;
            background: blue;
            display: block;
        }
        .modalSubheader {
            width: 100%;
            height: 25px;
            background: #007755;
            display: block;
        }
        .modalBody {
            overflow-y: scroll;
        }
        .modalFooter {
            height: 45px;
            width: 100%;
            background: cyan;
            bottom: 0;
            display: block;
            position: absolute;
        }
    }
}

HTML

<div class="modal">
<div class="modalWrapper">
    <div class="modalHeader">Turkey</div>
    <div class="modalSubheader">Chicken</div>
    <div class="modalBody">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="modalFooter"></div>
</div>

Answer 1

尝试使用：

padding-bottom: /*Required %*/;

可调节，响应高度属性。

流体模态高度

1 个答案: