Question

更新2

我找到了一个暂定的解决方案，目前适用于Mac OS X上的Chrome。You can check out my answer below for details。对于那些仍在尝试提供仅CSS解决方案或JavaScript解决方案的人，请继续，让我知道你提出了什么！请：）

更新

以下答案非常接近所有CSS解决方案，因此我将尝试使其工作。与此同时，我也在向JavaScript解决方案开放这个问题。你会如何使用JavaScript？现在欢迎所有解决方案：）

嘿伙计们，让我们看看我们是否可以一起解决这个问题！

我正在尝试设置布局，查看图片......

layout

我正在使用“粘性页脚”技术，效果很好，我已将其设置为每当两列中的一列变高时，另一列也会匹配其高度as described in this article。然而，问题是这两列不能自然地到达页脚...我正在通过JavaScript强制高度。

无论如何，所有相关的代码都可以在小提琴中看到......

CODE

http://jsfiddle.net/UnsungHero97/XrJMa/embedded/result/

问题

第一个大问题：如何设置它以使这些列的高度达到下方的页脚？我想要它，以便当页面加载时，粉色和蓝色列都会自动到达底部。
如何才能获得它，以便当粉色列超出其当前高度时，会出现一个本地滚动条，但是当蓝色列超出其当前高度时，将显示整个页面滚动条并向下推动页脚？
- 基本上，我希望粉色和蓝色列的高度始终是相同的高度，但高度仅由蓝色列确定;蓝色占主导地位，因此可以扩大两列的高度;粉红色不能扩展高度，只是在与蓝色相同的高度
仅使用CSS可以实现此功能吗？

如果我需要澄清任何内容，请告诉我。

Answer 1

有很多问题，所以我重写了它。我已经创造了你想要的东西。请享用。 =）

http://jsfiddle.net/hRkx8/53/

诀窍是让你的主要区域的边距与你的页脚（你绝对定位）的高度相同。因此，随着你的蓝色事物越来越大，它将比通常更早地开始推动页面的底部。

（编辑：此版本移动页脚，这更难做;但问题是蓝色区域被初始化为尽可能大，请参阅下面的一种方法来执行此操作）

我们走吧！不幸的是我必须将它包括在内，因为jsfiddle有一些严重的错误，阻止正确显示。这个版本的蓝色区域一直从底部开始。

绝对定位的元素似乎在页面变大时自动滚动有些麻烦，所以我创建了一个虚拟的#main div，就像你做的那样让它填满整个视口，然后在里面就是#footer和＃内容（你的蓝色和红色的东西）。 #footer绝对定位，因此它不占用空间/文档不关心它。随着#content的扩展，＃main容器随之展开，拖动页脚。为了防止页脚隐藏文本，必须使用margin-bottom。

执行此操作所需的CSS实际数量是，如果删除演示内容，只需要大约5行和虚拟元素。

<html>
<head>

<style>

body {
    margin:0; padding:0;
}

* { /* just for demonstration */
    box-sizing:border-box;
    padding:5px;
    border:1px dashed red;
    -webkit-border-radius:10px; -moz-border-radius:10px;
    background-color:hsla(0,50%,50%, 0.1);
}

/*important to use min-height not height*/

#main {
    position:relative; width:100%; min-height:100%;
    border:3px solid green;
}
#footer {
    position:absolute;
    left:0px; right:0px; bottom:0px; height:5em; /*can be anything*/
    background-color:lightgrey;
}

#content {
    position:relative;
    box-sizing:border-box;
    background-color:skyblue;
    margin-left:auto; margin-right:auto;
    padding-bottom:5em; /*must be same as #footer's height*/
    margin-top:10%; /*browser bug: actually acts like 20%*/
    width:50%;
    min-height:80%; /*should equal 100%-marginTop*/
    border:3px solid blue;
}
/* dependent elements */
#sidebar {
    position:absolute;
    top:0px; bottom:0px;
    right:100%; width:7em;
    background-color:pink;
overflow-y:scroll;
}
#topbar {
    position:absolute;
    bottom:100%; height:3em;
    right:-10%; left:10%;    
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>

setTimeout("$('pre').animate({height:1500}, 3000)", 1000);  

</script>

</head>
<body>

<div id="everything">
    <div id="main">

        <div id="content">
            <div id="sidebar">
                alpha
                <br/>
                beta
                <br/>
                gamma
                <br/>
                etc.
            </div>
            <div id="topbar">
                Menu1 * Menu2 * Menu3 * ...
            </div>
            This is my site.
            Yay.
            <pre>
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            </pre>
        </div>

        <div id="footer">
            footer
        </div>
    </div>
</div>

</body>
</html>

Answer 2

只是我，还是坐在房间里的粉红色大象......

＆LT; T A B L E＆gt;

???

更新（4月20日上午11点40分）：这是＆lt; table＆gt;版本：

http://juliusdavies.ca/stackoverflow/pink_elephant.html

请务必多次调整浏览器窗口的大小以查看其运行情况。

IE8 - 完美
Chrome - 完美
Safari - 没有滚动条，否则没关系
Firefox - 没有滚动条，否则没关系

Answer 3

基于你的most recent answer，我认为你不需要页脚是全宽的（只有粘性，虽然你的不是）但我也认为你知道你的版本只适用于你知道“foo - 不是那么重要的内容”的高度，因为你需要那个高度来设置侧边栏的顶部坐标。

你的版本下降了，当你缩小窗口内容消失了两侧..但基于它背后的想法 - 我已经使用你的逻辑扩展它并建立在粘性页脚，顶级菜单 - 一切都是在原始示例链接中。

页脚不是全宽，但你可以通过在html元素上放置一个背景图像来使它看起来像是这样，我的小提琴中有一个简单的虚拟图像，但它没有出现，无论如何，你会使图像与页脚相同的高度/颜色与内置的1px边框

这绝对依赖于你能够修复/计算粉红色/蓝色柱上方所有物的高度

此处需要的容器div少得多，内容现在位于源中的侧边栏之前

这是小提琴：fullsize：to edit

Answer 4

我将此视为具有顶部中间和页脚的设计。中间部分包含粉色和蓝色列。

使用CSS，将重复图像放在左右两列后面的中间部分的背景中。此图像将显示两列的边缘。希望您的设计能适应这一点。我承认我不知道，如果没有真正深入研究代码，如何让中间扩展到底部。我认为有一些不同的方法来解决这个问题。
使用css overflow：auto;为你的粉红色柱子;对于蓝色，设置溢出：auto;在标签上。
我希望这会有所帮助......

复杂的CSS布局...需要一些帮助

更新2

更新

CODE

问题

4 个答案:

这是小提琴：fullsize：to edit