全高人造色谱柱 [英] Full height faux columns

问题描述

几年来，我没有真正编写过一个网站，所以我很生疏。我想要做的是创建一个固定宽度和全高边栏和一个流体内容区域。 （请参阅视觉模型： http://i54.tinypic.com/2m2b445.png ） p>

我跑过人造专栏，他们似乎在做大部分技巧。该技术唯一没有做的事情（我无法弄清楚如何做到这一点）是一个全高边栏。

这里是CSS和HTML我使用的是：

  html，body {
 height：100％; 
} 
＃page-container {
 min-height：100％; 
保证金：0; 
职位：亲属; 
} 
 * html＃page-container {
 height：100％; 
} 
＃inner-container：after {
 content：; 
 display：block; 
明确：两者; 
} 
＃left-col {
 float：left; 
 width：250px; 
背景颜色：＃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> 
 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit ...< / p> 
< / div> 
< / div> 
< / div> 
  

如何让左列为全高？我应该使用不同的列技术吗？

解决方案

您可以绝对定位边栏，并为内容区域提供等效的边距：

 < style> 
 *，html {
 margin：0; 
 padding：0; 
} 
 html，body {
 height：100％; 
职位：亲属; 
} 
 
 / *我会使用条件样式表进行IE修复，而不是* / 
 * html div.column {
 height：100％; 
} 
 
 div.column {
最小高度：100％; 
} 
 div＃content {
 margin-left：250px; 
背景颜色：＃FFFF99; 
} 
 div＃sidebar {
 position：absolute; 
 top：0; 
剩下：0; 
 width：250px; 
背景颜色：＃99FFFF; 
} 
< / style> 
  

HTML：

 < div id =contentclass =column> 
 content 
< / div> 
< div id =sidebarclass =column> 
侧边栏
< / div> 
  

编辑：这项技术的一个主要优点是可以将页面源代码中的导航等内容标记 - 一个相当不错的SEO实践。

I haven't actually coded a website in a few years, so I'm pretty rusty. What I'm trying to do is create a fixed-width and full-height sidebar and a fluid content area. (See visual mockup: http://i54.tinypic.com/2m2b445.png)

I ran across faux columns, and they seem to be doing most of the trick. The only thing the technique isn't doing (and I can't figure out how to make it do) is a full-height sidebar.

Here's the CSS and HTML that I'm using:

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>

How can I make the left column full-height? Should I be using a different column technique?

解决方案

You could position the sidebar absolutely and give the content area the equivalent margin-left:

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

Edit: One major benefit of this technique is that you can put the content markup above the navigation etc in the page source - a pretty good SEO practice.

这篇关于全高人造色谱柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！