body { min-height: 100vh; /* ブラウザの表示領域に対して100%にサイズ固定． stickyヘッダ・フッタ対応のため．通常ではコンテンツの分量に応じてサイズ可変． */ margin: 0; padding: 0; background-color: ivory; } header { position: sticky; top: 0; /* の最上部位置に固定 */ text-align: left; color: dimgray; } footer { position: sticky; top: 100%; /* の最下部位置に固定 */ text-align: right; color: dimgray; } header, footer { background-color: wheat; margin: 0; padding: 1ex; } h1 { text-align: center; color: dimgray; background-color: lightgreen; margin: 1ex; padding: 1ex; border-radius: 1ex; } div#APP { background-color: lightgray; width: 30em; height: 10em; margin: 1em auto; padding: 1ex; border: solid 1px dimgray; }