流体全高列，粘性页脚
Posted
技术标签:
【中文标题】流体全高列，粘性页脚【英文标题】：Fluid full height column, sticky footer 【发布时间】：2013-02-21 04:35:13 【问题描述】：我确信这很容易，但我被卡住了。
我这里有一个简单的演示来说明。
http://www.ttmt.org.uk/forum/
这是一个容器宽度 a max-width(fluid)。
右栏是固定宽度，但左栏是流动的，页脚在底部是粘性的。
我只需要扩展左列（黄色）的高度，使其为 100%，它触及页脚
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cs-s-reset/cs-s-reset-min.css">
<style type="text/css">
/*--stickyFooter--*/
html, body
height: 100%;
#wrap
min-height: 100%;
max-width:1000px;
margin:0 auto;
border-left:20px solid white;
border-right:20px solid white;
#main
overflow:auto;
padding-bottom: 150px;/* must be same height as the footer */
height:100%;
min-height:100%;
footer
position: relative;
margin:-150px auto 0 auto;
height: 150px;
clear:both;
max-width:1000px;
background:red;
border-left:20px solid white;
border-right:20px solid white;
body:before /*Opera Fix*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
/*--END-stickyFooter--*/
header
height:100px;
background:#ddd;
#rightCol
height:100px;
background:#eee;
width:200px;
float:left;
#leftCol
margin-left:210px;
background:yellow;
height:auto;
height:100%;
</style>
</head>
<body>
<div id="wrap">
<header>
<h2>Header</h2>
</header>
<div id="main">
<div id="rightCol">
<h2>Right Col</h2>
</div><!-- #rightCol -->
<div id="leftCol">
<h2>Left Col</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- #leftCol -->
</div>
</div><!--wrap-->
<footer>
<div id="footer-container">
<h2>Footer</h2>
</div><!-- #footer-container -->
</footer>
</body>
</html>
【问题讨论】：
你可以用jquery实现流体高度。 想试试吗？我可以给你写代码！ 我可以尝试，但我希望有一个 CSS 解决方案 是的，我们也可以使用绝对位置来做到这一点。看看我的回答 【参考方案1】：让我们试试这个：
#leftCol
position: absolute;
width: 789px;
【讨论】：
以上是关于流体全高列，粘性页脚的主要内容，如果未能解决你的问题，请参考以下文章