流體模態高度

一直試圖讓流體高度模態工作，並遇到了一點障礙。我的父對象的高度爲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>

來源

2014-07-17 andrew

嘗試使用：

padding-bottom: /*Required %*/;

可調，響應高度屬性。

來源

2014-07-18 00:18:13 MykolaSenechyn

流體模態高度

回答

相關問題