html - 流体模态高度

Question

一直在尝试使流体高度模态正常工作，但遇到了一些障碍。我的父对象是 70% 高度，我试图让内容高度跨越其父对象的全部 100%，但仍然存在溢出问题。下面是代码和 jsfiddle 任何帮助表示赞赏:)

http://jsfiddle.net/NS7UP/

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 %*/;

用于可调整的响应式高度属性。