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

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

但我得到的只是一个布局，其中的区域仅与内容一样高

在这里你可以看到我的网站：我尝试了几种解决方法，但都不起作用

---

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

您正在寻找的是对该方法的修改。在本例中，#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%;
}

#清单1内容
#清单2
#资料
#容器{
左侧填充：200px；/*LC宽度*/
}
#容器>分区{
位置：相对位置；
浮动：左；
}
#居中{
宽度：100%；
}
#左{
宽度：200px；/*LC宽度*/
右：200px；/*LC宽度*/
左边距：-100%；
}

默认情况下，给定某个高度：100%将使项目与包含它的项目一样大。例如，这适用于divs中的div，但不适用于body标记中的div。为此，需要设置主体元素的高度。像这样

html, body{
    height: 100%;
}

希望这有帮助

更新： 我认为您遇到了麻烦，因为您正在尝试使用CSS做两件棘手的事情：固定到页脚底部和100%高度。我认为你必须改变你的页脚的工作方式，以获得100%的高度工作

我还没有一个完整的解决方案，但我制作了一个示例页面：

这将解决你100%的身高问题。页脚并不总是与内容底部匹配（环绕高度：94%接近，但并不完美）

这种粘性页脚技术应该可以解决剩下的问题：

---

祝你好运

高度总是很棘手的。。。一些解决方案要求使用显式高度，但是如果你的内容变得更大，它就会溢出，看起来很糟糕，或者更糟，溢出，用户无法访问

您可以使用“最小高度”来显示最佳情况场景，在该场景中，如果内容需要更高，则最低要求将允许div拉伸。您可以使用绝对定位来获得所需的布局，但是div不够灵活，无法容纳内容。您可以使用overflow:scroll来允许div像帧一样工作，但这通常对用户来说更烦人、更混乱

我建议使用上面的圣杯方法来布置容器，然后使用最小高度来进行最佳场景布局

---

如果这些解决方案都不够好的话，那么也有很多专家的博客帖子关于如何更一致地获得等高专栏

您可以使用以下代码

html

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

---

活生生的例子：

我已经尝试过圣杯，但它不起作用。我没有得到这个50-50%的高度布局，左侧是底部。通过你的代码，我得到了这样的结果：我包括了这三行，但没有成功，请看这里：嗯，但我得到的是：在你的示例中，选择器.ui内容和.ui页面活动需要高度：100%也更改了它，你可以从我之前的评论中在上面的链接中看到结果。但是现在我有了一个滚动条，为什么？是因为页脚和页眉的高度吗？是因为使用了位置：相对和顶部。相反，尝试位置：绝对；底部：0；对于Firefox中的“.ui page.ui header、.ui page.ui footer”，一切正常。在Safari和GoogleChrome中，我看到的只是一个蓝色的页脚在屏幕上到处都是。圣杯似乎不适合我。我考虑了一个JavaScript解决方案。但是如果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;
}