サイドバーにfixedを使い、height100%にすればスクロールしても固定できますが、ヘッダーが80pxあった場合、スクロールした時に上に80px分余白が飽きます。
サイドバーにtop0にし、ヘッダーをrelativeにしてzindexをサイドバーより低くすれば空白は飽きませんが上に80px分余白が空きます。paddingも同じです。
どうにかいい案はありませんか?
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するこういうことか?
<html>
<head>
<title>Test</title>
<style type="text/css"><!--
body {
padding: 0;
margin: 0;
}
#header {
width: 100%;
height: 80px;
position: fixed;
color: white;
background-color: black;
z-index: 2;
}
#sidebar {
width: 25%;
height: 100%;
padding-top: 80px; /* #header@height */
position: fixed;
background-color: darkgray;
z-index: 1;
}
#contents {
margin-left: 25%; /* #sidebar@width */
width: 75%;
padding-top: 80px; /* #header@height */
height: auto;
background-color: lightgray;
z-index: 0;
}
--></style>
</head>
<body>
<div id="header">ヘッダ</div>
<div id="sidebar">サイドメニュー</div>
<div id="contents">
<p>Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample</p>
</div>
</body>
</html>