Ich habe letzte Woche eine ähnliche Frage gestellt, aber ich kämpfe immer noch um eine Lösung für einen Fragebogen, den ich gerade erstelle.Höhe% des Elternteil-Div. Übersetzt nicht in% des Kind-Div.
Derzeit habe ich meine html, body Tags auf 100% Höhe eingestellt, und dann ein anderes Tag .questionnaire-container verschachtelt im Inneren auf 100% gesetzt.
Innen .questionnaire-container gibt es einen Behälter .questionnaire-box genannt, die 80% der Höhe der .quesionnaire-container nimmt und im Innern, dass ich habe einen Tag namens .questions.
Ich möchte .fragen füllen 100% der .questionnaire-box und haben einen Überlauf Text Display Scroll.
Das Problem, das ich habe, ist, dass die Höhe% nicht vollständig nach unten übergeben wird und mein Überlauf nicht ausgeblendet wird. Ich kann nicht für das Leben von mir herausfinden, was dieses Problem verursacht.
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>
Ah ändern! Ja, ich konnte das nur mithilfe von Google-Tools und dem Snippet-Generator replizieren. Es ist merkwürdig, dass Min-Höhe nicht funktioniert, weil ich gelesen habe, dass es sowohl die Höhe als auch die maximale Höhe überschreiben soll. In jedem Fall war die Umstellung von Min-Höhe auf Höhe die Lösung. – Jleibham