Question

我几年没有对网站进行编码，所以我很生疏。我要做的是创建一个固定宽度和全高的侧边栏和一个流体内容区域。（参见视觉模型：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>

如何使左列全高？我应该使用不同的色谱柱技术吗？

Answer 1

你可以绝对定位侧边栏并给内容区域留下相等的边距：

<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>

编辑：此技术的一个主要好处是您可以将内容标记放在页面源中的导航等上方 - 这是一个非常好的SEO练习。

Answer 2

一种简单的方法是将浮动的左列切换到绝对定位的列，然后给它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/

Answer 3

你所拥有的不是通常被认为是人造柱的东西。 The seminal article on faux columns is this A List Apart article。基本技术是将垂直重复的图像附加到列的父容器中，从而创建列的错觉。这确保了柱在视觉上延伸到整个高度。

我远离绝对定位的元素，除非它们确实是必要的（在这种情况下它们不是。）

jsfiddle似乎不允许外部资产（图像）here's a simple example of faux columns

全高度人造柱

3 个答案: