在两列页面上，如何使用 CSS 或 Javascript 将左侧 div 增长到与右侧 div 相同的高度？

Posted

技术标签:

【中文标题】在两列页面上，如何使用 CSS 或 Javascript 将左侧 div 增长到与右侧 div 相同的高度？【英文标题】：On a two-column page, how can I grow the left div to the same height of the right div using CSS or Javascript? 【发布时间】：2008-08-30 05:28:40 【问题描述】：

我正在尝试使用基于 div 的布局制作一个包含两列的页面（请不要使用表格！）。问题是，我不能让左边的 div 与右边的高度相匹配。我的右 div 通常有很多内容。

这是我的模板的配对示例来说明问题。

<div style="float:left; width: 150px; border: 1px solid;">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>

【问题讨论】：

【参考方案1】：

您最简单的答案在于下一个版本的 css (3)，目前没有浏览器支持。

现在您只能在 javascript 中计算高度并将它们设置在左侧。

如果导航非常重要，以这种方式定位，请沿顶部运行。

您还可以通过将边框移动到容器和更大的内部来做一个视觉技巧，并使其看起来大小相同。

这使它看起来一样，但事实并非如此。

<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
  <div style="float:left; width: 150px; border-top: 1px solid;">
    <ul>
     <li>nav1</li>
     <li>nav2</li>
     <li>nav3</li>
     <li>nav4</li>
    </ul>
 </div>
 <div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  ...
 </div>
 <div style="clear:both;" ></div>
</div>

【讨论】：

【参考方案2】：

可以在 CSS 中完成！不要让别人告诉你。

最简单、最轻松的方法是使用Faux Columns 方法。

但是，如果该解决方案不适合您，您需要阅读this technique。但请注意，这种 CSS 黑客技术会让你在半夜惊醒。

它的要点是您为列的底部分配了大量的填充，以及相同大小的负边距。然后将列放置在设置了overflow: hidden 的容器中。或多或少的填充/边距值允许盒子继续扩展，直到它到达包装器的末尾（由内容最多的列确定），并且填充产生的任何额外空间都被切断为溢出。这没有多大意义，我知道......

<div id="wrapper">
  <div id="col1">Content</div>
  <div id="col2">Longer Content</div>
</div>

#wrapper 
  overflow: hidden;


#col1, #col2 
  padding-bottom: 9999px;
  margin-bottom: -9999px;

请务必阅读我链接到的整篇文章，其中存在许多警告和其他实施问题。这不是一个漂亮的技术，但效果很好。

【讨论】：

【参考方案3】：

你可以在 jQuery 中做到这一点非常简单，但我不确定 JS 是否应该用于此类事情。最好的方法是使用纯 css。

    看看faux columns甚至Fluid Faux Columns

    另外一种技术（不适用于漂亮的 IE6）是定位：相对于父容器。子容器（在您的情况下为导航列表）应绝对定位并强制使用 'top:0; 占据整个空间；底部：0;'

【讨论】：

【参考方案4】：

使用 jQuery 来解决这个问题；只需在您的就绪函数中调用此函数即可：

function setHeight()
  var height = $(document).height(); //optionally, subtract some from the height
  $("#leftDiv").css("height", height + "px");

【讨论】：

【参考方案5】：

这是 CSS 无法做到的那些完全合理、简单的事情之一。正如 Silviu 所建议的，Faux Columns 是一种 hacky 但实用的解决方法。 如果有一天有一种说法，那就太好了

div.foo 高度：$（div.blah.height）；

【讨论】：

【参考方案6】：

这可以通过使用背景颜色的 css 完成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* 
    margin: 0;
    padding: 0;

body 
    font-family: Arial, Helvetica, sans-serif;
    background: #87ceeb;
    font-size: 1.2em;

#container 
    width:100%; /* any width including 100% will work */
    color: inherit;
    margin:0 auto; /* remove if 100% width */
    background:#FFF;

#header 
    width: 100%;
    height: 160px;
    background: #1e90ff;

#content /* use for left sidebar, menu etc. */
    background: #99C;
    color: #000;
    float: right;/* float left for right sidebar */
    margin: 0 0 0 -200px; /* adjust margin if borders added */
    width: 100%;
 
#content .wrapper 
    background: #FFF;
    margin: 0 0 0 200px;
    overflow: hidden;
    padding: 10px; /* optional, feel free to remove */

#sidebar 
    background: #99C;
    color: inherit;
    float: left;
    width: 180px;
    padding: 10px;

.clearer 
    height: 1px;
    font-size: -1px;
    clear: both;


/* content styles */
#header h1 
    padding: 0 0 0 5px;

#menu p 
    font-size: 1em;
    font-weight: bold;
    padding: 5px 0 5px 5px;

#footer 
    clear: both;
    border-top: 1px solid #1e90ff; 
    border-bottom: 10px solid #1e90ff;
    text-align: center;
    font-size: 50%;
    font-weight: bold;

#footer p 
    padding: 10px 0;
 
</style>
</head>

<body>


<div id="container">
<!--header and menu content goes here -->

<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc 

vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>

<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>

<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>

【讨论】：

【参考方案7】：

@hoyhoy

如果设计师可以在 html 中完成这项工作，那么他就可以拥有这样的设计。如果他是真正的网页设计大师，他会意识到这是媒体的局限性，因为杂志广告中不可能有视频。

如果他想通过赋予 2 列同等重要性来模拟权重，则可以更改边框，使它们看起来具有相同的权重，并使边框的颜色与列的字体颜色形成对比。

但至于使物理元素具有相同的高度，此时您只能通过表格构造或设置高度来做到这一点。为了模拟它们看起来相同的大小，它们不必是相同的大小。

【讨论】：

讽刺的是，我这样做是因为设计师这么说的！【参考方案8】：

想一想，我从来没有在列上使用底部边框。它可能只是溢出，并被切断。您可能希望底部边框来自作为列内容一部分的单独元素。

无论如何，我知道这不是一个完美的灵丹妙药解决方案。您可能只需要玩弄它，或者解决它的缺点。

【讨论】：

这适用于 FF3，但由于某种奇怪的原因，底部边框没有绘制在左侧 div 上。【参考方案9】：

还有一个基于 Javascript 的解决方案。如果你有 jQuery，你可以使用下面的插件。

<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() 
    var maxHeight=0;

    this.each(function()
        if (this.offsetHeight>maxHeight) maxHeight=this.offsetHeight;
    );

    this.each(function()
        $(this).height(maxHeight + "px");
        if (this.offsetHeight>maxHeight) 
            $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
        
    );
;

// usage
$(function() 
    $('.column1, .column2, .column3').equalHeights();
);
</script>

【讨论】：

【参考方案10】：

我用它来对齐 ID 为“center”和“right”的 2 列：

var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);

if (c.outerHeight() < r.outerHeight()) 
    c.height(r.height () + rp - cp);
 else 
    r.height(c.height () + cp - rp);

希望对你有帮助。

【讨论】：

【参考方案11】：

使 左侧菜单 div 与右侧内容 div 的高度相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function () 
        var height = $(document).height(); //optionally, subtract some from the height
        $("#menu").css("height", (height) + "px");
        $("#content").css("height", (height) + "px");
    );
</script>
<style type="text/css">
    <!--

    html, body 
        font-family: Arial;
        font-size: 12px;
    


    #header 
        background-color: #F9C;
        height: 200px;
        width: 100%;
        float: left;
        position: relative;
    

    #menu 
        background-color: #6CF;
        float: left;
        min-height: 100%;
        height: auto;
        width: 10%;
        position: relative;
    

    #content 
        background-color: #6f6;
        float: right;
        height: auto;
        width: 90%;
        position: relative;
    

    #footer 
        background-color: #996;
        float: left;
        height: 100px;
        width: 100%;
        position: relative;
    
    -->
</style>
</head>


<body>
<div id="header">
    i am a header
</div>
<div id="menu">
    i am a menu
</div>
<div id="content">
    I am an example of how to do layout with css rules and divs.
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>

</div>
<div id="footer">
    footer
</div>


</body>
</html>

【讨论】：

以上是关于在两列页面上，如何使用 CSS 或 Javascript 将左侧 div 增长到与右侧 div 相同的高度？的主要内容，如果未能解决你的问题，请参考以下文章

如何同时在两列中添加或插入多行？ [复制]

Android：在两列中显示信息，而不是 BaseAdapter 的一列

如何使用 UCanAccess 在两列上创建具有唯一约束的表？

在闪亮的应用程序中将 textInput 元素排列在两列或多列中

如何在两列上立方体，就好像它们是一列一样？

HTML CSS 响应式地将图像堆叠在两列中