ガイド：フルスクリーンの固定レイアウトのWebページ（ヘッダー、検索バー、コンテンツ、イベントリスト、フッタ）

Question

フレックスを使用してヘッダー、検索/ナビゲーションバー、コンテンツ、イベントリスト、フッターで画面サイズのWebページ全体を作成することを目的としています。ここで

Answer 1

ソリューションと例です。 JSFiddle Demo

1）カラム方向にフレックスをつけます。

基本的な構造のHTML：

<header> 
    <div class="left"> 
    <!-- Here comes button, later in document --> 
    </div> 
    <div class="title"> 
    Page branch 
    </div> 
    <div class="right"> 
    <!-- Here comes dropdown, which is later in document --> 
    </div> 
</header> 

<div class="container"> 
    <nav>Searchbar etc.</nav> 
    <section class="content">Main content</section> 
    <aside>Event list</aside> 
</div> 
<footer>Copyright footer etc.</footer> 

CSS：

html, body { 
    height: 100%; 
    margin: 0px; 
} 

body { 
    display: flex; 
    flex-flow: column; 
} 

header { 
    flex: 0 1 auto; 
    padding: 10px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

header .title { 
    flex: 0; 
    /* Keep branch in same line if has many words */ 
    white-space: nowrap; 
} 

header .left, header .right { 
    flex: 1; 
} 

header .right { 
    text-align: right; 
} 

.container { 
    flex: 1 0 auto; 
    display: flex; 
    align-items: stretch; 
} 

.content { 
    flex: 1; 
    background-color: thistle; 
} 

footer { 
    flex: 0 1 auto; 
    padding: 10px; 
    text-align: center; 
    background-color: lemonchiffon; 
} 

CSS：

aside, nav { 
    width: 200px; 
    flex: 0 0 auto; 
    padding: 10px; 
    box-sizing: border-box; 
} 

nav { 
    background-color: skyblue; 
} 

aside { 
    background-color: khaki; 
} 

（左クラス内の）ボタンのHTML追記：

<button class="button button-green">Button</button> 

（右クラスの内側）ドロップダウンHTMLの追記：ボタンとドロップダウンのための

<div class="dropdown"> 
    <div class="dropdown-title">Dropdown 
    <ul class="dropdown-content"> 
     <li>Menu item 1</li> 
     <li>Menu item 2</li> 
     <li>Menu item 3</li> 
    </ul> 
    </div> 
</div> 

CSS：

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-title { 
    cursor: pointer; 
} 

.dropdown-content { 
    list-style: none; 
    display: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    right: 0; 
    background-color: rgba(255,255,255,0.8); 
    z-index: 5; 
} 

.dropdown-title:hover .dropdown-content { 
    display: inline-block; 
} 

.dropdown-content li { 
    padding: 6px 10px; 
    white-space: nowrap; 
} 

.button { 
    display: inline-block; 
    border-radius: 6px; 
    transition: 0.2s ease-in-out; 
    outline-style:none; 
    cursor: pointer; 
    padding: 6px 12px; 
} 

.button-green { 
    border: 1px solid #aea; 
    background-color: #bfb; 
} 

.button-green:hover { 
    background-color: #dfd; 
} 

すべて一緒に

HTML：

<header> 
    <div class="left"> 
    <button class="button button-green">Button</button> 
    </div> 
    <div class="title"> 
    Page branch 
    </div> 
    <div class="right"> 
    <div class="dropdown"> 
     <div class="dropdown-title">Dropdown 
     <ul class="dropdown-content"> 
      <li>Menu item 1</li> 
      <li>Menu item 2</li> 
      <li>Menu item 3</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</header> 

<div class="container"> 
    <nav>Searchbar etc.</nav> 
    <section class="content">Main content</section> 
    <aside>Event list</aside> 
</div> 
<footer>Copyright footer etc.</footer> 

CSS：イベントリストで

html, body { 
    height: 100%; 
    margin: 0px; 
} 

body { 
    display: flex; 
    flex-flow: column; 
} 

header { 
    flex: 0 1 auto; 
    padding: 10px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

header .title { 
    flex: 0; 
    /* Keep branch in same line if has many words */ 
    white-space: nowrap; 
} 

header .left, header .right { 
    flex: 1; 
} 

header .right { 
    text-align: right; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-title { 
    cursor: pointer; 
} 

.dropdown-content { 
    list-style: none; 
    display: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    right: 0; 
    background-color: rgba(255,255,255,0.8); 
} 

.dropdown-title:hover .dropdown-content { 
    display: inline-block; 
} 

.dropdown-content li { 
    padding: 6px 10px; 
    white-space: nowrap; 
} 

.button { 
    display: inline-block; 
    border-radius: 6px; 
    transition: 0.2s ease-in-out; 
    outline-style:none; 
    cursor: pointer; 
    padding: 6px 12px; 
} 

.button-green { 
    border: 1px solid #aea; 
    background-color: #bfb; 
} 

.button-green:hover { 
    background-color: #dfd; 
} 

.container { 
    flex: 1 0 auto; 
    display: flex; 
    align-items: stretch; 
} 

nav, aside { 
    width: 200px; 
    flex: 0 0 auto; 
    padding: 10px; 
    box-sizing: border-box; 
} 

nav { 
    background-color: skyblue; 
} 

aside { 
    background-color: khaki; 
} 

.content { 
    flex: 1; 
    background-color: thistle; 
} 

footer { 
    flex: 0 1 auto; 
    padding: 10px; 
    text-align: center; 
    background-color: lemonchiffon; 
} 

ボーナス

あなたが現在のビューをいじりせずにスクロール可能なリストが必要な場合があります。

HTML（脇-elementをこの内部を設定）：

<div class="scrollable-list"></div> 

CSS：

aside { 
    position: relative; 
    overflow-y: auto; 
} 

.scrollable-list { 
    position: absolute; 
} 

向上させるために何があるかどうか、私にしてください教えてください。