div版面的自由伸展三欄式版面的程式碼_經驗交流-css教學-PHP中文網

首頁

web前端

css教學

div版面的自由伸展三欄式版面的程式碼_經驗交流

PHP中文网

May 16, 2016 pm 12:07 PM

div 程式碼佈局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../../../www.w3.org/TR/xhtml1/DTD/strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN"> 
<head> 
<title>自由伸展的三栏式版面</title> 
<meta name="Big John" content="August 24, 2002" /> 
<meta http-equiv="content-Type" content="text/html; charset=GB2312" />  
<meta name="mssmarttagspreventparsing" content="true" /> 
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" /> 
<meta name="description" content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " /> 
<meta name="distribution" content="global" /> 
<meta name="resource-type" content="document" /> 
<meta name="robots" content="all" /> 
<meta http-equiv="imagetoolbar" content="no" /> 
<meta http-equiv="pragma" content="no-cache" /> 
 
<style type="text/css"> 
<!-- 
 
html {margin: 0; padding: 0;} 
 
body {margin: 0; padding: 0; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;  
  font-size: small; background: #ee8 repeat-y url(images/browncol.gif);} 
/*** Image is 180px wide, and 20px high ***/ 
 
pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;} 
 
a {color: #000;} 
 
.alignright {margin-top: 0; text-align: right;} 
 
.small {font-size: .9em;} 
 
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;} 
 
/******************************************************************************* 
                       Positioning rules 
*******************************************************************************/ 
h1, h2 { 
font-size: 22px; 
margin: 0; 
color: #040; 
background-color: #c83;    /*** The header and footer have backgrounds, to cover the 2-tone body BG  ***/ 
border-top: 4px solid #000; 
border-bottom: 5px solid #000; 
padding: 3px 0 3px 1em; 
} 
 
h2 {background-color: #638; color: #fff;} 
 
div#leftbox {      /*** No side padding or borders, to avoid the IE5.x box model problem ***/ 
position: absolute; 
left: 10px; 
width: 150px; 
color: #ee8; 
padding-top: 10px; 
} 
 
#middlebox { 
margin: 0 34% 0 170px; 
border-left: 3px solid #000; 
border-right: 3px solid #000; 
padding: 10px; 
background-color: #dda;     /*** This div has a background to cover the 2-tone body BG ***/ 
} 
 
div#rightbox {    /*** No side padding or borders, to avoid the IE5.x box model problem ***/ 
position: absolute; 
right: 25px;     /*** IE5/mac will show a horizontal scrollbar  
        if this is less than 16px, or other units are used 
        http://www.l-c-n.com/IE5tests/right_pos/ ***/            
width: 30%; 
color: #820; 
padding-top: 10px; 
} 
 
--> 
</style> 
</head> 
 
<body> 
 
<h1> 
自由伸展的三栏式版面（Three Column Stretch）（页首） 
</h1> 
 
<div id="leftbox"> 
<pre class="brush:php;toolbar:false"> 
<strong>#leftbox</strong> { 
position: absolute; 
left: 10px; 
width: 180px(150px?); 
} 

登入後複製

这个栏段的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。

这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的"宽度(width)"值。

测试用连结

  
<strong>#rightbox</strong> { 
position: absolute; 
right: 2%; 
width: 30%; 
} 

登入後複製

这个栏段也能显示"body"的背景，但是因为"body"的背景图片只在垂直方向重复，而且仅与中间栏段的左边界同宽，所以这边显示的是"body"的背景颜色(background-color)。这个栏段的"宽度(width)"和右边界的区域是用百分比作单位，你想用其它单位也可以。

如果页面比 640px 还窄，中间和右边栏段使用的"pre"卷标会导致内容重叠。

测试用连结

返回 p.i.e.

  
<strong>#middlebox</strong> {  
margin: 0 34% 0 170px; 
border-left: 2px solid #000; 
border-right: 2px solid #000; 
padding: 0 10px 10px; 
background-color: #6b9; 
} 

登入後複製

中间栏段有设定背景色，以便跟右边栏段作区分。这个栏段也需要补白(padding)和边框(border)，不过因为没有设定"宽度(width)"属性，并不会触发 IE5.x 的区块模块(box model)问题。

这个栏段也必须是最长的栏段，并且用你支持的最大分辨率(resolution)浏览时，仍要能够延伸到检视区(viewport)底端下方，否则"body"的背景就会在页尾(footer)下方出现。

这整个范例没有在任何栏段里宣告"高度(height)"属性，这是为了避掉一些浏览器表现"高度(height)"属性的独特方式。因为这些条件的限制，这个版面非常适合那些总是有很长的中间栏段的网页，像是 weblogs。

页首、页尾和中间栏段是"固定的(static)"（或说"相对的(relative)"），而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定"高度(height)"。

在原始文件里，以绝对位置表示的 div#rightbox 放置在 div#leftbox 之后，因此这些 div 的"top"属性可以忽略。这会让它们待在它们该在的垂直方向起点，也就是说它们是固定的（直接连在固定的页首下）。所以如果页首因为额外的内容扩大，三个栏段都会往下调整，这样不是很棒吗？

Mozilla 中，因为垂直方向的舍入误差(rounding error)，在某些分辨率里，页尾下方可能有 1px 的空隙，这个范例描述得更详细。

Nav4 中没办法使用像"div#leftbox"这类语法，所以请用"#leftbox"来代替。我的写法只是为了要明确地表示。

致谢：再次感谢Philippe Wittenbergh ，因为他的帮忙，让这个范例更为完善。更感谢 Mark Howells ，因为他提供了最初的 body 背景点子。

Big John e-mail ©positioniseverything 最后更新日期： September 6, 2002 Created August 24, 2002

繁体中文翻译：yyhuang 简体中文转换: onestab

以下是填满栏段用的 Why don't cannibals eat clowns? Answer: They taste funny. What is the difference between a lousy golfer and a lousy skydiver? Answer: A lousy golfer goes WHAP! "Oh crap!". A lousy skydiver goes "Oh crap!" WHAP! Did you hear about the geneticist that tried to cross a potato and a chicken? He wanted to produce a chicken that would definitely NOT cross the road, but instead, got a bunch of potatoes that sat around pecking eachother's eyes out. How many Psychiatrists does it take to change a light bulb? Answer: Only one, but the bulb has to really want to change. Why did the egg cross the road? Answer: It had an inclination.

自由伸展的三栏式版面（Three Column Stretch）（页尾）

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1421

Laravel 教程

1315

PHP教程

1266

C# 教程

1239

Related knowledge

解決win7驅動程式碼28的方法 Dec 30, 2023 pm 11:55 PM

有的用戶在安裝設備的時候遇到了錯誤，提示錯誤代碼28，其實這主要是由於驅動程式的原因，我們只要解決win7驅動程式碼28的問題就可以了，下面就一起來看一下應該怎麼來操作吧。 win7驅動程式碼28怎麼辦：首先，我們需要點擊螢幕左下角的開始選單。接著，在彈出的選單中找到並點擊“控制面板”選項。這個選項通常位於選單的底部或附近。點擊後，系統會自動開啟控制面板介面。在控制面板中，我們可以進行各種系統設定和管理操作。這是懷舊大掃除關卡中的第一步，希望對大家有幫助。然後，我們需要繼續操作，進入系統和

藍色畫面代碼0x0000001怎麼辦 Feb 23, 2024 am 08:09 AM

藍屏代碼0x0000001怎麼辦藍屏錯誤是電腦系統或硬體出現問題時的一種警告機制，代碼0x0000001通常表示出現了硬體或驅動程式故障。當使用者在使用電腦時突然遇到藍色畫面錯誤，可能會感到驚慌失措。幸運的是，大多數藍色畫面錯誤都可以透過一些簡單的步驟來排除和處理。本文將為讀者介紹一些解決藍屏錯誤代碼0x0000001的方法。首先，當遇到藍色畫面錯誤時，我們可以嘗試重

電腦頻繁藍屏而且每次代碼不一樣 Jan 06, 2024 pm 10:53 PM

win10系統是一款非常優秀的高智慧系統強大的智慧可以為使用者帶來最好的使用體驗，一般正常的情況下使用者的win10系統電腦都不會出現任何的問題！但在優秀的電腦也難免會出現各種故障最近一直有小伙伴們反應自己的win10系統遇到了頻繁藍屏的問題！今天小編就為大家帶來了win10電腦頻繁藍屏不同代碼的解決方法讓我們一起來看看吧。電腦頻繁藍屏而且每次代碼不一樣的解決辦法：造成各種故障碼的原因以及解決建議1、0×000000116故障原因：應該是顯示卡驅動不相容。解決建議：建議更換廠商原帶驅動。 2、

GE通用遠端程式碼可在任何裝置上編程 Mar 02, 2024 pm 01:58 PM

如果您需要遠端編程任何設備，這篇文章會為您帶來幫助。我們將分享編程任何設備的頂級GE通用遠端代碼。通用電氣的遙控器是什麼？ GEUniversalRemote是一款遙控器，可用於控制多個設備，如智慧電視、LG、Vizio、索尼、藍光、DVD、DVR、Roku、AppleTV、串流媒體播放器等。 GEUniversal遙控器有各種型號，具有不同的功能和功能。 GEUniversalRemote最多可以控制四台設備。頂級通用遙控器代碼，可在任何裝置上編程GE遙控器配備一組代碼，使其能夠與不同設備配合。您可

如何使用Copilot產生程式碼 Mar 23, 2024 am 10:41 AM

身為一名程式設計師，對於能夠簡化程式設計體驗的工具，我感到非常興奮。借助人工智慧工具的幫助，我們可以產生演示程式碼，並根據需求進行必要的修改。在VisualStudioCode中新引入的Copilot工具讓我們能夠創建具有自然語言聊天互動的AI生成程式碼。透過解釋功能，我們可以更好地理解現有程式碼的含義。如何使用Copilot產生程式碼？要開始，我們首先需要取得最新的PowerPlatformTools擴充。要實現這一點，你需要進入擴充頁面，搜尋“PowerPlatformTool”，然後點擊Install按鈕

解決代碼0xc000007b錯誤 Feb 18, 2024 pm 07:34 PM

終止代碼0xc000007b在使用電腦時，有時會遇到各種各樣的問題和錯誤代碼。其中，終止代碼最為令人困擾，尤其是終止代碼0xc000007b。這個程式碼表示某個應用程式無法正常啟動，給用戶帶來了不便。首先，我們來了解終止碼0xc000007b的意思。這個程式碼是Windows作業系統的錯誤代碼，通常發生在32位元應用程式嘗試在64位元作業系統上執行時。它表示應

詳解0x0000007f藍屏代碼的原因及解決方案 Dec 25, 2023 pm 02:19 PM

藍屏是我們在系統使用的時候常常會碰到的問題，根據錯誤代碼的不同，會有很多中不一樣的原因和解決方法。例如我們在使用時遇到stop：0x0000007f的問題，可能是硬體或軟體錯誤，下面就跟著小編一起來看看解決方法吧。 0x000000c5藍色畫面代碼原因：答：記憶體、CPU、顯示卡突然超頻，或軟體運作錯誤。解決方法一：1.開機時不斷按F8進入，選擇安全模式，回車進入。 2.進入安全模式後，按win+r開啟運行窗口，輸入cmd，回車。 3.在指令提示窗口，輸入“chkdsk/f/r”，回車，然後按y鍵。 4、

學習Python繪圖的速成指南：繪製冰墩墩的程式碼實例 Jan 13, 2024 pm 02:00 PM

快速上手Python繪圖：畫出冰墩墩的程式碼範例Python是一種簡單易學且功能強大的程式語言，透過使用Python的繪圖庫，我們可以輕鬆實現各種繪圖需求。在本篇文章中，我們將使用Python的繪圖庫matplotlib來畫出冰墩墩的簡單圖形。冰墩墩是一隻擁有可愛形象的熊貓，非常受小朋友的喜愛。首先，我們需要安裝matplotlib函式庫。你可以透過在終端運行

See all articles

div版面的自由伸展三欄式版面的程式碼_經驗交流

自由伸展的三栏式版面（Three Column Stretch）（页尾）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題