2016-07-25 123 views
1

上週早些時候我問了一個類似的問題,但我仍在努力尋找我正在構建的調查問卷的解決方案。父母div的高度百分比未翻譯爲子div的百分比

目前,我已將我的html,body標籤設置爲100%高度,然後將另一個標籤.questionnaire-container嵌套在裏面設爲100%。

Inside .questionnaire-container有一個容器叫做.questionnaire-box,它佔據了80%的高度.quesionnaire-container,裏面有一個名爲.questions的標籤。

我想.questions填寫.questionnaire-box的100%,並有任何溢出文本顯示滾動。

我遇到的問題是高度%沒有被一直傳遞下去,我的溢出沒有被隱藏。我無法找到我的生活是什麼造成這個問題。

html, body { 
 
    min-height: 100%; 
 
} 
 

 
.questionnaire-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100%; 
 
    min-height: 100%; 
 
    background-color: rgba(0,0,255, .1); 
 
} 
 

 
.questionnaire-box { 
 
    position: relative; 
 
    width: 80%; 
 
    min-height: 85%; 
 
    margin: 20px auto; 
 
    background-color: #ffffff 
 
} 
 

 
.questions { 
 
    min-height: 100%; 
 
    padding: 2rem 3rem; 
 
    overflow: auto; 
 
}
<div class="questionnaire-container"> 
 
    <form class="questionnaire-box"> 
 
    <div class="questions"> 
 
     <p>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.</p> 
 

 
     <p>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.</p> 
 

 
     <p>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.</p> 
 

 
     <p>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.</p> 
 

 
     <p>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.</p> 
 
    </div> 
 
    </form> 
 
</div>

回答

1

添加overflow:hidden.questionnaire-box,你可能會改變你所有的min-heightheight

html, 
 
body { 
 
    height: 100%; 
 
    margin:0 
 
} 
 
.questionnaire-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0, 0, 255, .1); 
 
} 
 
.questionnaire-box { 
 
    position: relative; 
 
    width: 80%; 
 
    height: 85%; 
 
    margin: 20px auto; 
 
    background-color: #ffffff; 
 
    overflow: hidden 
 
} 
 
.questions { 
 
    height: 100%; 
 
    padding: 2rem 3rem; 
 
    overflow: auto; 
 
}
<div class="questionnaire-container"> 
 
    <form class="questionnaire-box"> 
 
    <div class="questions"> 
 
     <p>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.</p> 
 

 
     <p>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.</p> 
 

 
     <p>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.</p> 
 

 
     <p>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.</p> 
 

 
     <p>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.</p> 
 
    </div> 
 
    </form> 
 
</div>

+0

啊!是的,我剛剛能夠使用谷歌開發工具和代碼片段生成器來複制它。奇怪的是,最小高度不起作用,因爲我讀到它應該覆蓋高度和最大高度。無論哪種方式從最小高度切換到高度是解決方案。 – Jleibham