全高人造色譜柱

我幾年沒有真正編碼過一個網站，所以我很生鏽。我想要做的是創建一個固定寬度和全高邊欄和一個流體內容區域。（見視覺樣機：http://i54.tinypic.com/2m2b445.png）全高人造色譜柱

我跑過人造色彩的列，他們似乎在做大部分的伎倆。該技術唯一沒有做的事情（我無法弄清楚如何做）是一個全高邊欄。

這裏的CSS和HTML，我使用：

html,body { 
    height: 100%; 
} 
#page-container { 
    min-height: 100%; 
    margin: 0; 
    position: relative; 
} 
* html #page-container { 
    height: 100%; 
} 
#inner-container:after { 
    content: " "; 
    display: block; 
    clear: both; 
} 
#left-col { 
    float: left; 
    width: 250px; 
    background-color: #F3F3F3; 
} 
#right-col { 
    position: relative; 
    margin-left: 250px; 
}

HTML：

<div id="page-container"> 
    <div id="inner-container"> 
     <div id="left-col"> 
      <ul> 
       <li>Lorem Ipsum</li> 
       <li>Dolar Sit Amet</li> 
       <li>Consectetur</li> 
       <li>Adipiscing</li> 
       <li>Elit Integer</li> 
      </ul> 
     </div> 
     <div id="right-col"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> 
     </div> 
    </div> 
</div>

我怎樣才能讓左邊的列全高？我應該使用不同的色譜柱技術嗎？

來源

2011-08-13 D. Henrich

您可以絕對定位側邊欄，併爲內容區域留出相應的空白處：

<style> 
*, html { 
margin: 0; 
padding: 0; 
} 
html, body { 
height: 100%; 
position: relative; 
} 

/* i would use conditional stylesheets for IE fixes instead */ 
* html div.column { 
height: 100%; 
} 

div.column { 
min-height: 100%; 
} 
div#content { 
margin-left: 250px; 
background-color: #FFFF99; 
} 
div#sidebar { 
position: absolute; 
top: 0; 
left: 0; 
width: 250px; 
background-color: #99FFFF; 
} 
</style>

HTML：

<div id="content" class="column"> 
content 
</div> 
<div id="sidebar" class="column"> 
sidebar 
</div>

編輯：一個這種技術的主要優點是，你可以把內容標記在頁面源導航等上面 - 一個很好的搜索引擎優化的做法。

來源

2011-08-13 03:06:21

這對我來說似乎是最好的選擇。它減少了標記，正如你所說，這是很好的SEO練習。謝謝！ –

非常感謝，很高興我能幫忙！哦，平心而論，我認爲穆先到了那裏！ –

不用擔心，其中一個最後的投票是我的畢竟:) –

一個簡單的方法是將您的向左浮動欄切換到絕對定位的一個，然後給它height: 100%：

#left-col { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 250px; 
    height: 100%; 
    background-color: #F3F3F3; 
}

直播版本：http://jsfiddle.net/ambiguous/XyBzC/

您也可以刪除#inner-container:after以這種方式作爲這只是爲了清除浮動左列（不再浮動）。

一個版本沒有:after：http://jsfiddle.net/ambiguous/XyBzC/1/

而且Joseph是正確的評論，你可以添加padding: 0擺脫在小提琴的滾動條：

html,body { 
    height: 100%; 
    padding: 0; 
}

例如：http://jsfiddle.net/ambiguous/XyBzC/2/

來源

2011-08-13 02:58:46

注意：您可以將'padding：0px'添加到body以修復jsfiddle中的滾動條。 –

@Ola：'＃right-col'已經有'margin-left：250px;'（最初是爲了讓'＃right-col'避免浮動邊欄）。我沒有看到'min-height'會有什麼不同，但我可能會錯過一些東西。 –

@Joseph：謝謝，我把它合併了。 –

你有什麼不是什麼一般認爲人造色譜柱。 The seminal article on faux columns is this A List Apart article。基本技巧是將創建列錯覺的垂直重複圖像附加到列的父容器。這確保了柱子在視覺上延伸到整個高度。

我從絕對定位元素望而卻步，除非他們真的有必要（在這種情況下，他們都沒有。）

的jsfiddle似乎並沒有讓外部資產（圖像），所以here's a simple example of faux columns

來源

2011-08-13 03:09:58 steveax

我不同意有關避免絕對定位 - 它有非常好的，幾乎完美的瀏覽器支持，它可以是一個非常有用的方式，堅持你想要他們的東西。如果可能的話，我會避免的是指定一個絕對單位（如px） - 使用絕對值和「0」將某些東西粘貼到其相對父親的邊緣，與其他定位技術一樣自適應和有彈性。 –

你說得對，它不是真正的虛擬列:) –

@Ola Tuvesson在那裏（不幸）仍然是一些使用IE6的人（儘管這種情況終於快速下降）。 IE6渲染引擎中的一個錯誤是絕對位置和高度100％不能很好地混合。在某些情況下，IE6和IE7中有絕對定位觸發的其他一些錯誤。總的來說，我認爲絕對定位創造了比浮動更多的問題。由於絕對定位將元素從文檔流中移除，因此我傾向於僅在需要的結果（源可訪問性原因的源排序等）時使用它。 – steveax

全高人造色譜柱

回答

相關問題