.container
  nav    
    ul
      li
        a(href="https://mike2014mike.github.io/") 首頁
      li
        a(href="https://mike2014mike.github.io/") 關於我們
      li
        a(href="https://mike2014mike.github.io/") 產品資訊
      li
        a(href="https://mike2014mike.github.io/") 服務項目
      li
        a(href="https://mike2014mike.github.io/") 聯絡我們
  section section 元素的 margin-left 樣式確保有足夠的空間容納 nav 元素。
  section 
    p 【古文觀止 - 左傳 卷一 ‧ 鄭伯克段于鄢】
    p 初,鄭武公娶于申,曰武姜,生莊公及共叔段。莊公寤生,驚姜氏,故名曰寤生,遂惡之。愛共叔段,欲立之。亟請於武公,公弗許。及莊公即位,為之請制。公曰:「制,巖邑也。虢叔死焉,它邑唯命。」請京,使居之,謂之京城大叔。祭仲曰:「都城過百雉,國之害也。先王之制,大都,不過參國之一;中,五之一;小,九之一。今京不度,非制也,君將不堪。」公曰:「姜氏欲之,焉辟害?」對曰:「姜氏何厭之有?不如早為之所,無使滋蔓。蔓,難圖也。蔓草猶不可除,況君之寵弟乎?」公曰:「多行不義必自斃,子姑待之。」既而大叔命西鄙、北鄙貳於己。公子呂曰:「國不堪貳。君將若之何?欲與大叔,臣請事之。若弗與,則請除之,無生民心。」公曰:「無庸,將自及。」大叔又收貳以為己邑,至于廩延。子封曰:「可矣!厚將得眾。」公曰:「不義不暱,厚將崩。」大叔完聚,繕甲兵,具卒乘,將襲鄭;夫人將啟之。公聞其期,曰:「可矣。」命子封帥車二百乘以伐京。京叛大叔段。段入于鄢,公伐諸鄢。五月辛丑,大叔出奔共。書曰:「鄭伯克段于鄢。」段不弟,故不言弟。如二君,故曰克。稱鄭伯,譏失教也。謂之鄭志。不言出奔,難之也。
  section 你可以看看當你調整瀏覽器視窗大小時發生了什麼事,版面配置的效果還不錯!
  
footer 如果你使用了一個固定定位(position: fixed)的頁首或頁尾,請確保有足夠的空間來顯示它們!我在這個例子裡,在 body 元素的樣式上加了 margin-bottom 屬性,並預留了 120px 的空間。

p 這個例子可以運作是因為 container 比 nav 元素還高,如果容器比 nav 元素還低的話,nav 就會溢出(overflow)到容器外面。
View Compiled
* {
  box-sizing: border-box;
}
.container {
  position: relative;
  border: 2px solid #6AC5AC
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
  border: 2px solid #D64078
}
section {
  /* position is static by default */
  margin-left: 200px;
  padding: 10px;
  border: 2px solid #FDC72F
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
  border: 2px solid #96C02E
}
body {
  margin-bottom: 120px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.