1
私は先週先週同様の質問をしましたが、まだ私が構築しているアンケートの解決策を見つけるのに苦労しています。親divの高さ％が子divの％に変換されていません
現在、私はhtml,bodyタグを100％の高さに設定し、別のタグ.questionnaire-containerを100％に設定しています。
.questionnaire-containerの内部には、の高さが80％で、内側に.questionsというタグがあります。.questionnaire-boxというコンテナがあります。
.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>
ああを変更することがあります！はい、私はちょうどGoogleのdevツールとスニペットビルダーを使用してこれを複製することができました。高さと高さの両方をオーバーライドするはずだと読んだので、最小高さが機能しないのは奇妙です。いずれの方法でも最小高さから高さに切り替えることが解決策でした。 – Jleibham