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

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

 

sample.htm

<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css"/>
</head>
<body>
<div id="header">
header
</div>
<div id="sidebar">
sidebar
<p>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
</p>
</div>
<div id="content">
content
<p>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
</p>
</div>
</body>
</html>
 

 

sample.css

body {
  margin: 0px;
  padding: 0px;
  color: black;
  font-family: 'Consolas','Verdana','Times New Roman','MS Gothic','Meiryo';
  font-size: 11pt;
  line-height: 150%;
  text-align: center;
  background-color: #888fff;
}

#header {
  position: fixed;
  width: 100%;
  height: 70px;
  margin: -111px 0px 0px;
  padding: 20px 0px;
  border: 1px solid royalblue;
  border-radius: 10px;
  background-color: blue;
  z-index: 1000;
}

#sidebar {
  position: fixed;
  width: 100px;
  margin: 0px;
  padding: 20px 50px;
  border: 1px solid royalblue;
  border-radius: 10px;
}

#content {
  position: relative;
  width: auto;
  margin: 111px 0px 0px 201px;
  padding: 20px 50px;
  border: 1px solid royalblue;
  border-radius: 10px;
  text-align: left;
}
 

参考サイト