Question

首先请允许我向您保证，我已经搜索并尝试了很多这种看似简单的布局解决方案而没有成功。

现在我不得不求助于display:table，但更喜欢使用div的非脚本纯CSS解决方案。

我需要的是一个基本的2列布局：侧边栏div拥抱左上角，内容包装器div位于侧边栏的右侧。

侧边栏将包含3-4个div，内容包装器1 div。

踢球者是我需要侧边栏和内容包装器的背景总是填充视口的100％高度 - 即使内容包装器div中没有内容。

如果内容包装器div中有内容，则侧边栏和内容包装器的背景应垂直扩展以填充视口。

下面的小提琴就是这样做的。一旦您开始在移动设备上“缩放”，就会出现此方法的问题（在侧边栏上使用position:fixed）。然后内容将在固定div后面消失。

关于如何最好地实现这种布局的任何建议？

小提琴：http://jsfiddle.net/mnorup/2Xvdn/1

Answer 1

这对你有用吗？ FIDDLE

我只是改变了宽度并漂浮了。

CSS

#sidebar {
  height: 100%;
  background: yellow;
  width: 230px;
  border: 0px solid transparent;
  float: left;
}
#contentwrap {
  min-height: 100%;
  background: blue;
  float: left;
  margin-left:10px;

好的，看看它是否更接近。 FIDDLE

文本的容器是所有内容的容器，当它展开时，左边的栏也是如此。

较小的内容，以便您可以看到背景 - FIDDLE

Answer 2

我认为我得到的东西非常接近你想要的东西：http://jsfiddle.net/2Xvdn/5/

我改变了什么：

添加了一个id 在之外的包装器，并将以下css添加到其中：{ overflow: hidden; min-height: 100%; }
替换了{ background: yellow; width: 230px; float: left; margin-bottom: -9999em; padding-bottom: 9999em; }

侧边栏

删除了{em> contentwrap 的min-height并添加了以下css：{ margin-bottom: -9999em; padding-bottom: 9999em; }

以下是一些其他方法可以使列具有相同的高度：http://www.vanseodesign.com/css/equal-height-columns/我使用了这里描述的边框和负边距，只是我使用了填充而不是边框。

2列最小高度100％困难

2 个答案: