CSS流体布局？

我有一个关于如何设置我的基本流体布局的快速问题。我有一个40px高的，顶部100％宽的标题栏，这看起来很棒。CSS流体布局？

然后我有一个#left和#right div，分别浮动。这看起来很酷。他们都有高度100％，这很好，但问题是页面然后滚动40px，因为从标题栏有40px ...如果我使用流体布局的标题，然后内容框的它看起来很糟糕在一个微小的或非常大的分辨率。

任何想法？

这里是我的CSS

body 
{ 
    background: #ebebeb; 
    margin: 0; 
    padding: 0; 
    min-width: 750px; 
    max-width: 1500px; 
} 
#wrap 
{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 
#header 
{ 
    background: #414141; 
    height: 40px; 
    width: 100%; 
} 
#sidebar 
{ 
    width: 30%; 
    background: #ebebeb; 
    height: 100%; 
    float: left; 
} 
#rightcontent 
{ 
    width: 70%; 
    background: #fff; 
    height: 100%; 
    float: right; 
} 
#footer 
{ 
    width: 100%; 
    background: #414141; 
    height: 40px; 
    clear: both; 
}

这里是我的html页面：

<body> 
<div id="wrap"> 
    <div id="header"> 
     head 
    </div> 
    <div id="sidebar"> 
     side 
    </div> 
    <div id="rightcontent"> 
     right 
    </div> 
    <div id="footer"> 
     footer 
    </div> 
</div> 
</body>

是否帮助:)

来源

2010-01-16 tarnfeld

height: 100%;为网页一件棘手的事情，因为你是毫无疑问，敏锐地意识到。在Firefox 3.5.7中查看代码0123'和#rightcontent列的高度只有大约em--这足以容纳您放入其中的文本，而不是我认为您期望的完整页面长度。这些列正试图从其父级的显式高度计算百分比高度，但#wrap也具有基于％的高度，这会导致此失败（至少在我的Firefox中）。

现在，正如您所描述的（列的高度正确，除了一个额外的40px滚动条），似乎正在发生的事情是，您使用的任何浏览器都将#wrap的全高作为100％这是父母，这是<body>。所以很自然地，当您的列大小设置为<body>的高度时（也包含页眉和页脚的高度），列太高。

我用了几次，以达到列的整页长度的外观，适当地扩展到任何网页尺寸为我的网页的底部贴position: fixed; bottom: 0px;<div>标签与里面刚好够标记一招模仿列的结构和相关的CSS。

这里就是我做你的页面来获得这样的效果：

<!--Add this to your HTML--> 
<div id='columnfooter'> 
<div id='sidecont'></div> 
    <div id='rightcont'></div> 
</div>

/* And modify your CSS like this */ 
#sidebar, div#sidecont { 
    width: 30%; 
    background: #ebebeb; 
    float: left; 
} 

#rightcontent, div#rightcont { 
    width: 70%; 
    background: #fff; 
    float: right; 
} 

div#rightcont, div#sidecont { 
height:100%; 
} 

#footer { 
    width: 100%; 
    background: #414141; 
    height: 40px; 
    position: relative; 
    bottom: 0px; 
} 

div#columnfooter { 
position: fixed; 
z-index: -25; 
bottom: 40px; 
height: 100%; 
background: #ebebeb; 
width: 100%; 
}

是，使用HTML，形成空背景列这种方式确实一种混合的语义和文体标记 - 一个技术性的否定。但CSS清楚地从HTML中抽象出来，并且使用此代码，我可以在底部找到整个页面列，即#footer（即使当多于一页的内容被添加到上面的任何一列时），并且它的行为在最新任何分辨率的Firefox，Safari，Opera，Chrome和IE8版本（测试至800x600）。

希望这会有所帮助！

来源

2010-01-17 11:39:50 Impirator

嘿，很好的修复！虽然我最终没有使用它，因为我使用javascript来保持这一点，并在用户调整窗口大小等一些其他事情透视，等等...我知道这可能会导致与非JS浏览器的问题，但其余的网络应用程序是非常重的JS，所以我有非js浏览器问题的地方alreay :-) – tarnfeld 2010-01-17 13:42:22

CSS流体布局？

回答

相关问题