固定寬度布局的設計不會因為用戶擴大或縮小瀏覽器窗口而發生變化。
這種設計通常以像素作為衡量單位。
優勢
- 能夠使用像素值精確地控制大小並定位元素
- 相比流體布局，設計人員能夠在頁面上更加自如地控制元素的外觀和位置
- 在控制文本行的長度時可以不用考慮用戶窗口的大小
- 相對於頁面其余部分，圖像的大小始終不變
劣勢
- 頁面的邊緣可能存在大塊空白區域
- 如果用戶的屏幕比設計人員的屏幕擁有更高的分辨率，那么頁面可能看起來很小，文本也可能難以閱讀
- 如果用戶放大了字段大小，文本可能會與指定的區域相適應
- 相比流體布局，對於同樣的內容，這種頁面常常在垂直方向上占用更多的空間
示例
下面的代碼演示了固定布局，包含導航菜單、頁腳、功能和3列。
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS 固定布局</
title
>
<
style
type
=
"text/css"
>
* {
color: #665544;
text-align: center;}
body {
width: 960px;
margin: 0 auto;}
#content {
overflow: auto;
height: 100%;}
#nav, #feature, #footer {
padding: 10px;
margin: 10px;}
.column1, .column2, .column3 {
width: 300px;
float: left;
margin: 10px;}
li {
display: inline;
padding: 5px;}
</
style
>
</
head
>
<
body
>
<
div
id
=
"header"
>
<
h1
style
=
"color:#706fd3"
>軟件開發，成就夢想</
h1
>
<
div
id
=
"nav"
>
<
ul
>
<
li
><
a
href
=
""
>首頁</
a
></
li
>
<
li
><
a
href
=
""
>產品</
a
></
li
>
<
li
><
a
href
=
""
>服務</
a
></
li
>
<
li
><
a
href
=
""
>關於我們</
a
></
li
>
<
li
><
a
href
=
""
>聯系我們</
a
></
li
>
</
ul
>
</
div
>
</
div
>
<
div
id
=
"content"
>
<
div
id
=
"feature"
>
<
p
>功能</
p
>
</
div
>
<
div
class
=
"article column1"
>
<
p
>第一列</
p
>
</
div
>
<
div
class
=
"article column2"
>
<
p
>第二列</
p
>
</
div
>
<
div
class
=
"article column3"
>
<
p
>第三列</
p
>
</
div
>
</
div
>
<
div
id
=
"footer"
>
<
p
>© Copyright 2019</
p
>
</
div
>
</
body
>
</
html
>