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

时间:2011-04-19 17:55:35

标签: javascript css layout

更新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/

问题

  1. 第一个大问题:如何设置它以使这些列的高度达到下方的页脚?我想要它,以便当页面加载时,粉色和蓝色列都会自动到达底部。

  2. 如何才能获得它,以便当粉色列超出其当前高度时,会出现一个本地滚动条,但是当蓝色列超出其当前高度时,将显示整个页面滚动条并向下推动页脚?

    • 基本上,我希望粉色和蓝色列的高度始终是相同的高度,但高度仅由蓝色列确定;蓝色占主导地位,因此可以扩大两列的高度;粉红色不能扩展高度,只是在与蓝色相同的高度
  3. 仅使用CSS可以实现此功能吗?

  4. 如果我需要澄清任何内容,请告诉我。

4 个答案:

答案 0 :(得分:2)

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

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>

答案 1 :(得分: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 - 没有滚动条,否则没关系

答案 2 :(得分:1)

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

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

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

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

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

这是小提琴:fullsizeto edit

答案 3 :(得分:0)

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

  1. 使用CSS,将重复图像放在左右两列后面的中间部分的背景中。此图像将显示两列的边缘。希望您的设计能适应这一点。我承认我不知道,如果没有真正深入研究代码,如何让中间扩展到底部。我认为有一些不同的方法来解决这个问题。

  2. 使用css overflow:auto;为你的粉红色柱子;对于蓝色,设置溢出:auto;在标签上。

  3. 我希望这会有所帮助......