全高人造色谱柱

我几年没有真正编码过一个网站，所以我很生锈。我想要做的是创建一个固定宽度和全高边栏和一个流体内容区域。（见视觉样机：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

全高人造色谱柱

回答

相关问题