HTML：ヘッダーとサイドバーを固定するためのCSS

ヘッダーとサイドバーを固定するための設定を紹介します。

 

sample.htm

<html>
<head>
<style>
body {
  margin: 0px;
  padding: 100px 0px 0px 200px;
}
#header {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  text-align: center;
  background-color: #888fff;
}
#sidebar {
  left: 0px;
  padding-top: 10px;
  width: 200px;
  height: 100%;
  text-align: center;
  background-color: #fff888;
}
#content {
  overflow: auto;
  padding-top: 10px;
  padding-left: 20px;
  background-color: silver;
}
@media screen {
  #header {
    position: fixed;
  }
  #sidebar {
    position: fixed;
  }
}
</style>
</head>
<body>
<div id="header">
  <h1>header</h1>
</div>
<div id="sidebar">
  <h1>sidebar</h1>
</div>
<div id="content">
  <h1>content</h1>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
</div>
</body>
</html>

参考サイト