0
すべての垂直スペースを塗りつぶすフレームでサイトを作成しようとしています。オーバーフローするコンテンツがスクロール可能になります。css親divを100％の高さで子をスクロール可能にする
htmlとbody heightは100vhに設定され、すべてのボックスの親は100％に設定されています。私は別の方法を発見していないし、すべての単一の親は100vhであり、最終的にサイトがあふれています。
私は間違っていますか？ 私はちょうど行方不明午前のように感じる "位置：" ...
<!DOCTYPE html>
<html>
<head>
<title>Pastebook</title>
<style type="text/css">
html,
body {
height: 100vh;
}
/*central panel*/
.central {
position: absolute;
width: 100%;
margin: 0 auto;
height: 100%;
border: 3px solid blue;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 970px;
height: 100%;
border: 3px solid yellow;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
height: 100%;
border: 3px solid lightgreen;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 5px solid gray;
font-size: 100%;
overflow: auto;
padding: 5px;
height: 100%
}
/*Example content*/
.content {
height: 100px;
background: lightgray;
margin: 5px;
}
</style>
</head>
<body>
<div class="central">
<div class="content">
central
</div>
<div class="middle">
<div class="content">
middle
</div>
<div class="contentPanel">
<div class="content">
content
</div>
<div class="clipboard">
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ないあなたが何をしようとして確認してみてください。しかし、あなたの解決策から高さ：100vhまでのすべての要素に 'box-sizing：border-box'を打つことができます。それは、彼らのコンテンツだけではなく、彼らが食べるマージンではなく、「100vh」となるだろう。 – abluejelly
要約：クリップボードを除くすべての要素は正確にすべての垂直スペースを占有する必要があります。オーバーフローはクリップボードで管理されます（実際に発生する唯一の場所）。 –
'flex-direction：column'と' flex-grow：1'で '100vh'' flexboxを使いたい、' 100％ 'ではなく' 33.3％ 'にdivの高さを設定したいと思っています。クリップボードをその外側に置くことができます。しかし、私は*なぜあなたがこれをしたいのか尋ねなければならないのですか？すべてのビューポートがすべてのコンテンツを格納するのに十分な大きさのvhを持っているわけではありません。自然なスクロールは、理由によって行われる方法で行われます。同様に、これは作っているUXの悪夢のように聞こえます。私が本当に助けてくれるのをためらってしまいます。 – abluejelly