如何使用 DIV 创建类似表格的 CSS 布局？答案

【问题标题】：How to create a table-like CSS layout with DIVs?如何使用 DIV 创建类似表格的 CSS 布局？
【发布时间】：2011-08-08 21:33:43
【问题描述】：

更新 2

我找到了一个暂定的解决方案，目前适用于 Mac OS X 上的 Chrome。You can check out my answer below for details。对于那些仍在尝试提出纯 CSS 解决方案或 JavaScript 解决方案的人，请继续前进，让我知道您的想法！请:)

更新

下面的答案非常接近全 CSS 解决方案，因此我将尝试使其工作。与此同时，我也向 JavaScript 解决方案提出了这个问题。你会如何使用 JavaScript 来做到这一点？现在欢迎所有解决方案:)

让我们一起看看能不能解决这个问题！

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

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

反正相关代码都可以在fiddle中看到...

代码

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

问题

第一个大问题：我如何设置它以使这些列的高度达到下面的页脚？我希望它在页面加载时，粉红色和蓝色列都自动到达底部。
我怎样才能得到它，当粉红色列超过其当前高度时，会出现一个局部滚动条，但当蓝色列超出其当前高度时，会出现整个页面滚动条并向下推页脚？

- basically, I want the height of the pink and blue columns to ALWAYS be the same height but the height is only determined by the blue column; blue is dominant so it can expand the height of both columns; pink cannot expand the height, just be at the same height as blue

能否仅使用 CSS 实现此功能？

如果我需要澄清任何事情，请告诉我。

【问题讨论】：

您是否有理由不想坚持使用 JS 选项？ JS 确实是处理复杂垂直间距和对齐的最佳方式，因为 CSS 在该领域没有太多功能。
yo DA... 真的唯一的原因是因为我想尝试只使用 CSS 来做这件事，有点像挑战；只使用 CSS 会非常好。但是，我将更新我的问题，以便您可以继续使用 JavaScript 造成一些损害。让我们看看你得到了什么:)
@Hristo，盒子的宽度会一直一样吗？
@Marko...您指的是哪个框？现在，让我们选择是的。
嗯，这肯定是一个挑战，但我是实用网页设计的粉丝。 ;o) 当 CSS 是锤子时，这是螺丝刀的解决方案。 JS 逻辑是计算两个 div 的高度，然后通过设置它的高度来更改较短的一个以匹配较长的一个。可以添加其他逻辑来处理您的其他变量。你在用 jQuery 吗？

标签： javascript css layout

【解决方案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>

【讨论】：

如何让蓝色列在高度方面最初到达页脚？
你没有要求那个。 =)所以不幸的是它有点难。如果我知道我会这样做的。让我稍微思考一下。
@ninjagecko...我确实问过...First big problem: how can I set it up so that the height of these columns reaches the footer below? I want it so that when the page loads, both pink and blue columns reach the bottom automatically.
@ninjagecko... 考虑一下 :) 除了想让它发挥作用之外，别着急 :)
已解决，享受 =)（您可以稍微调整一下值，这样滚动条就不会在开始时出现）编辑：刚刚添加了 overflow-y:scroll;

【解决方案2】：

我认为这是一个顶部、中间和页脚的设计。中间部分包含粉色和蓝色列。

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

【讨论】：

@Greg... 感谢您的回复。它不像顶部、中间、页脚那么简单。我希望 :) 它更像是一个大的顶部和一个页脚，因此两者相互依赖。
@Hristo ...这是我几周前所做的事情的解决方案。我认为它可能适合您的需要。在我的解决方案中，我需要对顶部和底部进行特殊查看。但它浮动在页面中间而不是整个页面；不完全是您的需要。好好的
@Greg...谢谢。我很高兴它对你有用。但是，我需要继续研究我的解决方案。

【解决方案3】：

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

???

更新（4 月 20 日上午 11:40）：这是

版本：

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

请务必调整浏览器窗口的大小几次以查看它的实际效果。

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

【讨论】：

看不到任何大象，尤其是粉红色的
?可能不是。显示：表？当然是一个有效的选择。
+1 到 DA.... ROTFL！让我看看我是否理解正确？

不好，但是

可以吗？？？？

如果我们在 CSS 中将 it 设置为除 display: table 之外的任何内容，

是否变得可以接受？ 'display:block' 表可以吗？

更新 2

更新

代码

问题

这是小提琴：fullsize：to edit