Question

我的HTML / CSS网页有问题。我想要这个布局：

http://img227.imageshack.us/img227/9978/layoutw.png

但我得到的只是一个布局，其中的区域只有内容的高度。

在这里，您可以看到我的网站：http://ud05_188.ud05.udmedia.de/spotlight/jquery.html我尝试了几种解决方法，但它不起作用。

解决这个问题的最佳方法是什么？

Answer 1

您正在寻找的是Holy Grail方法的改编。在这种情况下，＃list1是'left'列（如该文章中所述），其余列进入'center'列，这意味着您可以完全省略'right'列。

基本上类似于：

<div id="container">
  <div id="left">
    #list 1 contents
  </div>
  <div id="center">

    <div>
      #list2
    </div>
    <div>
      #data
    </div>

  </div>
</div>


#container {
  padding-left: 200px;   /* LC width */
}
#container > div {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}

Answer 2

您可以使用以下代码

<强> HTML

<div id="wrapper">
  <div id="left"></div>
  <div class="right">start of top</div>
  <div class="right">start of bottom</div>
</div>

<强> CSS

html, body {
    height:100%;
}
#wrapper {
    height:100%;
    overflow:hidden;
}
#left {
    height:100%;
    width:50%;
    background:#09F;
    float:left;
}
.right {
    height:50%;
    width:50%;
    float:left;
    background:#69a;
}

直播示例：http://jsbin.com/idozi4

Answer 3

默认情况下，给出高度：100％会使项目与包含它的项目一样大。这适用于div中的div，但不适用于body标签内的div。为此，您需要设置body元素的高度。像这样。

html, body{
    height: 100%;
}

希望这有帮助。

<强>更新我认为你遇到了麻烦，因为你正在尝试用CSS做一些棘手的事情：固定到页底的页脚和100％的高度。 我认为您必须改变页脚的工作方式才能使100％的高度正常工作。

我还没有完整的解决方案，但我做了一个示例页面： http://deviouschimp.co.uk/misc/stackoverflow/columntest.html

这应该解决你的100％身高问题。页脚并不总是匹配内容的底部（#wrap高度：94％使其接近，但它并不完美）。

这种粘性页脚技术应该对其余内容进行排序：http://www.cssstickyfooter.com/

祝你好运！

Answer 4

高度永远是棘手的...一些解决方案要求使用明确的高度，但是如果你的内容变得越来越大，它将溢出并且看起来很讨厌，或者更糟糕的是，溢出并且用户无法访问。

您可以使用最小高度来显示最佳情况，其中如果内容需要更高，则最低要求将允许div伸展。您可以使用绝对定位来获得所需的布局，但是div不够灵活，无法容纳内容。您可以使用overflow：scroll来允许div像框架一样工作，但这通常会让用户感到烦恼和烦恼。

我会说使用上面的圣杯方法来放置容器，然后使用最小高度来获得最佳案例场景布局。

如果这些解决方案都不够好，那么专家们也会发布大量关于如何更加一致地获得相同高度列的博客文章。

如何在HTML中创建具有相等列高的布局？

4 个答案: