我一直在尝试为我正在制作的这份调查问卷解决一些问题。我重新设置了这个问题的格式，因为我的旧问题非常令人困惑，我正在从一个新的 Angular 来看待这个问题。
使用新代码，我发现问题是 .questionnaire-box 内的子 div .question-container 溢出了超过设定高度的所有文本。我更喜欢 .question-container 与 .questionnaire-box 具有相同的高度并在溢出时滚动。
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 2rem 0;
background-color: rgba(100, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
background-color: #ffffff;
}
.question-container {
max-height: 80%;
overflow-y: scroll;
}
.questionnaire-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
text-align: center;
}
button {
margin 1rem;
}<html>
<body>
<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="question-container">
<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>
<div class="questionnaire-nav">
<button>Submit</button>
</div>
</div>
</div>
</body>
</html>这就是它在我的应用程序中的样子。
这就是我想要实现的目标。
最佳答案
这个问题有点过于复杂，但我认为这里的问题是您无法向下滚动并查看 .question-container 中的所有内容。
这个有用吗？
https://jsfiddle.net/tobyl/bemkkz72/
如果是这样，关键 CSS 就是此 block 中的附加 padding-bottom:
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem 6rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
关于html - 子 div 溢出溢出到父 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38492565/