所以我已经尝试了很多来调整div 1到div 2的高度（或者相反）。试过的表，试过javascript（工作但是在调整大小时弄乱了布局，请参阅：1）等等。
因此;我有这个设计，我试图让它响应。这似乎没问题但是当我的屏幕大小> 1024px时，我的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>
答案 0 :(得分：1)
快速而简单的解决方案是从float和#leftCol2移除#rightCol2并添加display: table-cell这样DIV就像Table元素一样并且会互相称赞。
您可以看到updated JS.Fiddle here。
答案 1 :(得分：1)
两列的父显示：table，子（立即）显示：table-cell。列的大小在最小宽度媒体查询中。所有视口宽度共享的全局样式都在媒体查询之外。
<强> 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%
}
}
答案 2 :(得分：0)
那里有很多代码，但我的建议如下：