所以我正在为我的一个律师朋友做一个网站。他给了我一个他喜欢的布局的参考，并问我是否可以“使他与那个相似”。参考站点可能已有 10 年历史，并使用 5 级深度的嵌套表完成，因此我决定像优秀的 Web 开发人员一样使用 CSS。现在的问题是他想要一个带有标题的两列布局，但其中一列与标题重叠而另一列不重叠。我把网站布置成这样：

一切都使用相对定位和百分比或自动高度/宽度。现在的主要问题是，正如预期的那样，#left 和#right 的高度都是页面的 100%。问题是#right div 被向下推到它上面的#header div，所以页面底部有一些额外的空间，仅由#right div 占据。有没有解决的办法？我考虑过将#header 的样式更改为具有百分比高度并从#right 的高度中减去它，但这对我来说似乎很笨拙（最重要的是它可能会破坏IE）。

提前致谢！

我有一个固定且居中的 CSS 两列布局。在导航长而内容短的页面上，页脚不会重新定位到导航下方 - 它保持在内容区域的最小高度，并且导航位于页脚后面。

我已经在小提琴中包含了所有内容供您查看：http: //jsfiddle.net/fmJqw/1/

但本质上，我有以下结构：

CSS如下：

任何帮助感激不尽！我在扯头发。

我正在寻找在这张图片中创建类似的东西。

每个块都有一个图像（方形图像）和文本。

任何人都知道如何设计它？我更喜欢 CSS 解决方案。

谢谢！

我有一个两列布局，它在调整以摆脱身体上的双滚动条时停止工作。现在我在包装上有一个滚动条，这是我想要的，但内容不知何故与滚动条的宽度重叠。

两个内容框不能按应有的方式并排放入容器中。我已经尝试为 content1 使用不同的缩小固定宽度，但它根本没有区别，并且列宽无论如何都保持不变。我把头发扯掉了，因为这不合逻辑！

使用此标记：

我该如何设计它：

这样每一对都应该有相同的高度？高度应该来自内容较长的文章，即如果C中的内容比D长，则D应该与C的高度匹配。

到目前为止我尝试过的是好的旧浮动，但由于它是浮动的，所以它具有取决于内容的可变高度。

我也用谷歌搜索过类似的东西，但我发现的是固定高度的列，它们只是隐藏了额外的内容。

我希望构建一个由所见即所得编辑器使用的两列布局。示例：http ://taurean.io/labs/clearcut-theme/essay.html

我有一个名为的外部 div 元素和两个名为和的container内部 div 元素firstDivsecondDiv

firstDiv 将浮动到左侧，而 secondDiv 将浮动到右侧。

我希望外部 div 元素尽可能多地占用宽度，这意味着 100% 的可用宽度。

我还希望两个内部元素占用一半空间，这意味着containerdiv 的 50%。

这是一些基本代码：

问题 1

我期待一个简单的实体边框围绕 body 元素，看起来确实如此，但是我在浏览器的 y 维度上有一个滚动条。为什么会这样？我说我想要 100% 的 body 宽度和高度，看起来浏览器使用的不止这些。

现在我添加了以下 CSS 代码：

问题 2 似乎 div 占据了“容器”div 的 50%，但高度似乎超过了 100%。为什么会这样？图片：

我对第二个 div 执行相同的操作，并通过使用以下 CSS 代码来包含 float 属性：

问题 3 我希望两个 div 元素组成一个两列页面。然而，第二个 div 元素再次比前一个元素占用更多的高度，而且发生的情况是当我调整浏览器大小时，第二个 div 位于第一个下方。

为什么会发生这种情况，我该如何避免？

提前致谢

我使用 float:left 将多个框（div）排列在两列中。div 有不同的高度，导致这样的布局：

但是我想定义一个最小高度（最小可用空间），当一个盒子必须漂浮在左列时。我想要一个类似于这样的结果：

我想这是不可能的......但是也许有一个CSS技巧？

谢谢，康拉德

背景

我一直在寻找具有 960px 宽度和两列的布局：

• 主要内容：右对齐，宽度550px，从容器右边距插入；
• 侧边栏：左对齐，宽度为 250px，在顶部、左侧和底部边缘与容器齐平；

我一直在努力解决的问题是设置背景，使侧边栏背景占用 250px 宽度，100% 父级高度，并与父级左边缘齐平，让主要内容占用剩余宽度和 100% 高度父母。

我看过一些技术，但它们似乎相对不灵活，例如，虽然它很优雅，但 Faux Columns 似乎不太合适http://www.alistapart.com/articles/fauxcolumns/。

考虑了一下，我决定尝试将内容的渲染与背景的渲染分开。具体来说，我将主要内容向右浮动，侧边栏向左浮动，然后 aclear:both以便容器将调整为两列中较大的一个。

接下来，虽然仍在容器内但在 之后clear:both，我有两个绝对定位的空 div，侧边栏的高度为 100%，宽度为 250px，left:0主要内容的宽度为 100%。我还调整了 z-index 以便侧边栏在前面。

还有其他必要的 CSS（例如容器包装器必须相对定位），但请参阅下面的源代码。

问题

这与我在带有 Safari 的 Mac 上所希望的完全一样，两个背景都根据最高的列展开，并且源代码中的标记是有效的。但是，我的两个主要担忧是：

1. 我不确定这将如何在其他浏览器中呈现，尤其是 IE
2. 我试图在设计时考虑到 SEO，但我对 SEO 不太了解，因为我还在学习，这对 SEO 有多友好？

其他来源

如何使浮动 div 的高度达到其父级的 100%？

http://brentgrossman.com/348/not-so-fuax-columns/

（可能还有一些，抱歉不记得了！）

源代码

注意我使用了明亮的颜色和调整过的 div 来更好地说明正在发生的事情。

感谢阅读，期待评论！

在此 wordpress 主题中滚动时，如何使右侧边栏列静态？

http://foxnet.fi/demot/live-wire/2012/02/25/two-columns-content-left/

我想要一个类似的功能

http://thenextweb.com/microsoft/2013/02/15/messengers-skpe/?fromcat=all

右侧栏应始终在页面上，直到页面滚动到底部。