fixedで可変するヘッダー

by jyoze

HTML

<header>
  <p><img src="http://placehold.jp/cc9999/333333/800x200.png"></p>
</header>
<div id="container">
  <img src="http://placehold.jp/9999cc/333333/1000x200.png">
</div>

SCSS

img {
  max-width: 100%;
  height: auto;
}
header {
  position: fixed;
  top: 0;
  overflow: hidden;
}
#container {
  height: 1000px;
  padding-top:20%;
}