2 个 div 高度相同：谁能帮我解决这个问题（请！）？答案

【问题标题】：2 divs same height: Who can help me fix this (please!)?2 个 div 高度相同：谁能帮我解决这个问题（请！）？
【发布时间】：2014-12-17 04:00:24
【问题描述】：

所以我尝试了很多将 div 1 的高度调整为 div 2（或相反）。尝试过表格，尝试过 javascript（工作但在调整大小时弄乱了布局，请参阅：1）等等。

所以;我有这个设计，我试图让它响应。这似乎没问题，但是当我的屏幕尺寸大于 1024 像素时，我的 rightCol2 div 没有扩展到 leftCol2 div（反之亦然）。我有点剥离我的布局以使其尽可能短和干净，我想知道是否有人可以帮助我解决这个问题，以便 leftcol2 和 rightCol2 div 调整到彼此的高度，并且布局保持响应没有任何问题。我的代码在这里：http://jsfiddle.net/53wn4fzg/ 或在下面查看。

这花费了我很多时间，非常感谢您的帮助！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body{ background:#f6f6f6;}
#mainContent2 {
    clear: left;
    text-align:justify;
}

#container2 {
padding-right:1%; 
width:97%;  
margin: 10px auto;
position: relative;
padding-top: 10px;
max-width: 927px;
}
#leftCol2{  float: left;
    width: 180px;
    padding: 15px 0px 15px 15px;
    margin-top: 50px;
    background: #fff;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    min-height: 400px;
    position: relative;
    }
#rightCol2{float:right;
width:732px;
background: #fff;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    border-top-right-radius: 4px;
    padding: 0px;
    min-height: 480px;
    height:100%;
    position: relative;
}
#footer2 {
    clear: both;
    background: #FFFFFF;
    max-width: 712px;
    width: 100%;
    margin-left: 195px;
    background: #FFFFFF;
    padding: 10px 10px; 
    }

#topBar2{
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    border-top-right-radius: 4px;
    background: #f7f3f0;
    margin-top: 0px;
    float: left;
    width: 100%;
    padding: 0px;
    min-height:50px;
}

div#primarycustom{display:none;}
.shadow3 {
    -moz-box-shadow: -1px -1px 2px #ccc;
    -webkit-box-shadow: -1px -1px 2px #ccc;
    box-shadow: -1px -1px 2px #ccc;
}
@media only screen and (max-width: 1024px) {
.shadow2, .shadow3 {
    -moz-box-shadow: 0 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 0 2px #ccc;
    box-shadow: 0 0 0 2px #ccc;
            }
#logo h1#site-title {margin-left: 10px !important;}
#leftCol2{float:left; margin:10px 0 0 1%; padding:0;
    width:100%;
    -moz-border-radius-topright: 4px;
    border-top-right-radius: 4px;
    }
#rightCol2{float:left;margin:0 0 0 1%; padding:0;
width:100%;
}
#container2 {padding-right:1.7%; width:97%;}
#rightCol2, #leftCol2, #footer2{width:100%; }
div#logo{width:100%; position:relative; top:0; left:0;}
#topBar2{width:100%;}
#footer2 {width:100%;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
margin:10px 0 10px 1%;
padding:10px 0 10px 0;
max-width:none;
float:left;

}
h1#site-title {float:left;}
div#primarycustom { margin:0 0 10px 0;display:block; float:left;}
div#primarycustom div#custom2 { width: 70% ;
  margin-left: auto ;
  margin-right: auto ;
  margin-top:10px;
  display:block;}
}

</style>


<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$(window).resize(function() { //Fires when window is resized
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width <= 1024) {
        $("#container2").each(function() {
        var detach = $(this).find("#leftCol2").detach();
        $(detach).insertAfter($(this).find("#rightCol2"));
        })
    }
    else {
        $("#container2").each(function() {
        var detach = $(this).find("#rightCol2").detach();
        $(detach).insertAfter($(this).find("#leftCol2"));
        })
    }
});
});//]]>  

</script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="container2">
    <div id="logo">
                <h1 id="site-title">
            Here my site title
            </h1>
   <div id="primarycustom" role="complementary">
            <div id="custom2">
          <select style="max-width:100%;" onChange="if (this.value) window.location.href=this.value">

<option>option 1</option>
<option>option 2 </option>
</select>

            </div>
        </div><!-- #primary .widget-area --> </div>
                  <div id="leftCol2" class="shadow3">
    <div class="custpad">
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        <p>This sidebar is longer than my mainContent2 div on the right.</p>
        </div>
    </div>
        <div id="rightCol2" class="shadow3">

        <div id="topBar2">
Slogan
        </div>

        <div id="mainContent2">
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p><p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer.</p>
<p>Here is my main content of my site. The sidebar in this is case is longer(last).</p>
        </div>
    </div>
    <div id="footer2" class="clearfix shadow2">
        <div id="colophon">
            <div id="site-info">
                Here my footer
            </div>

        </div><!-- #colophon -->
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： jquery html css height

【解决方案1】：

演示：https://jsbin.com/cuquso

两列的父级是 display:table，子级（直接）是 display:table-cell。列的大小在 min-width 媒体查询中。所有视口宽度共享的全局样式超出媒体查询。

HTML

  <header>header</header>
  
  <div class="page-wrapper">
  
  <aside> sidebar </aside>
  
  <article>
    <p> So I've tried a lot to adjust the height of div 1 to div 2 (or the other way around). Tried tables , tried javascript (worked but messed up the layout when resizing, see: 1), and a lot more. </p>

    <p>So; I have this design and I am trying to make it responsive. That seems to go okay but when i have screen size of >1024px my rightCol2 div is not expanding to the leftCol2 div (and the other way around). I kinda stripped my layout to make it as short and clean as possible and I was wondering if someone could help me out with this one, so that the leftcol2 and rightCol2 div adjust to eachothers heights and the layout keeps beign responsive without any problems. </p>
  </article>
  </div>
  
  <footer>footer</footer>

CSS

html,
body {
    padding: 0;
    margin: 0;
}
header,
footer,
.page-wrapper,
.page-wrapper > aside,
.page-wrapper > article {
    box-sizing: border-box
}
.page-wrapper > aside,
.page-wrapper > article {
    border: 1px solid red;
    padding: 20px;
}
header, footer {
    padding: 20px;
    border: 1px solid red;
}
@media (min-width:700px) { 
    .page-wrapper,
    header,
    footer{
        width: 100%;
        margin: 0 auto;
        max-width: 1200px;
    }
    .page-wrapper {
        display: table
    }
    .page-wrapper > aside,
    .page-wrapper > article {
        display: table-cell
    }
    .page-wrapper aside {
        width: 30%
    }
}

【讨论】：

嗨，让我看看我是否理解你的意思。你建议使用display:table 方法，对吗？就像疯狂马特一样？正如你所看到的，我尝试过，但我无法使边缘顶部工作。有什么办法吗？谢谢！
是的，您可以使用其他方法，例如复制相同的结构并让标题看起来从顶部出来，或者如果它是单行则使用绝对定位。这是一件复杂的事情，但它是可行的。我没有时间。 jsbin.com/geyuti/1/edit?html,css,output
其实我想出了一个快速的方法，这只是一个例子，很粗糙，没有类。 jsbin.com/wosura/1
嗨，非常感谢！绝对是我可以继续做的事情！不过我想知道；现在，当调整
如果您使用此设置，您可以使用 jQuery，因为如果不将其更改为浮点数就无法更改演示顺序，或者您可以使用 jquery 和浮点数。有很多选择。在谷歌上查找“响应式等高列 jquery”，有一个可以玩的脚本。

【解决方案2】：

一个快速简单的解决方案是从#leftCol2 和#rightCol2 中删除float 并添加display: table-cell，这样DIV 的行为就像Table 元素一样，并且可以相互补充高度。

你可以看到你的updated JS.Fiddle here。

【讨论】：

您好，感谢您的回答。是的，试过了，但问题是它不会接受 margin-top.. 找不到解决方法...你知道解决方法吗？
嗨，谢谢！不过我想知道；当我调整屏幕大小
当使用 display:table-cell 时，DIV 的行为就像普通的表格标签，这就是为什么您的边距停止工作以及浮动不起作用的原因。如果您希望一个 DIV 位于另一个 DIV 之前，只需更改它们出现的顺序即可。
但是如何更改订单？当屏幕尺寸

【解决方案3】：

那里有很多代码，但我的建议是这样的：

调查flexbox。这是一个新规范，完全符合您的要求，但并非所有浏览器都支持它。
使用 javascript 但更新 window.resize 事件。我还建议通过 javascript 设置“最小高度”而不是高度，因为如果内容长于最小高度，这将使元素自然流动。

【讨论】：

您好，谢谢。我试图尽可能地减少代码:) 我如何能够在调整大小时更新 js 代码？试过了，但没能完成。谢谢。