どういうわけか、私は何が欠けているのか理解できません...
2 つのバー (ヘッダーとフッター)absoluteの間に多数の divを配置しようとしています。fixedヘッダーにはいくつかのタブが含まれ、フッターには著作権が含まれています。オーバーフローしたdivではなく、ウィンドウのスクロールバーを使用したいのですが、それが可能であることはわかっています!
div の下部がフッターの背後に隠れないように、すべての絶対位置の div には余分なマージンを設定する必要があります。
次のようになります。
私の問題のスニペットは、jsfiddleで入手できます。
私のHTML：
<ul class="cf tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div style="margin-top: 40px; padding-bottom: 30px; position:relative">
<div style="position:absolute;top:300px; height:100px; width: 250px; left:200px; border: 1px solid purple;">aaa</div>
<div style="position:absolute;top:0px; height:100px; width: 100px; left:100px; border: 1px solid purple;">bbb</div>
<div style="position:absolute;top:450px; height:100px; width: 250px; left:400px; border: 1px solid purple;">ccc</div>
</div>
<div class="cf footer">Copyright ©</div>
私が使用しているスタイルシート:
ul.tabs {
list-style-type: none;
list-style-position: outside;
padding:5px;
margin: 0;
position:fixed;
top:0;
z-index: 999;
background-color: white;
left:0;
right:0;
border-bottom: 1px solid green;
opacity: 0.7;
}
ul.tabs li {
float: left;
margin:1px;
padding: 4px 10px 2px 10px;
border: 1px solid black;
}
div.footer {
position: fixed;
bottom: 0;
left: 0;
right:0;
background-color:#DEDEE9;
border-top: 3px outset #BBBBBB;
padding: 5px;
opacity: 0.6;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
皆さん、ヒントはありますか？
追加情報 添付の画像でわかるように、右下の四角い div の紫色の境界線が固定フッターと重なっています。これいらない。フッターの上部と一致するように、すべての div に余分なマージンが含まれるように、どこかに下マージンを与える必要があります。