Question

我有2个布局列（左右，左边是流体），由CSS方法Flex-Box协调。我试着等于他们的高度。右侧布局的高度应与左侧布局的高度相同。我把一个卷轴放在右边。所以我用JQuery写了一些东西，虽然它们的高度相等但看起来并不相同。

var leftH=$(".left-column").height();

$('.right-column').css('height', (leftH)+'px');

$('.right-column').css('display', 'inline');

alert("Left Height : "+leftH);

alert("Right Height : "+$(".right-column").height());

.columns-container{

	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	margin:8px auto 5px;

}

.left-column{

-webkit-box-flex:2;

-webkit-flex:2;

    -ms-flex:2;

        flex:2;     
 
}

.right-column{

-webkit-box-flex:1;

-webkit-flex:1;

    -ms-flex:1;

        flex:1;  

overflow-y: scroll;
display: none;

}

.left-column, .right-column{

  border: 1px solid  #ccc; 
  padding: 20px; 
  margin: 8px; 
  border-radius: 5px;
  box-shadow: 0 0 1px 1px #ccc;
  background: #f8f8f8;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="sytle.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
	
<div class="columns-container">

	<div class="left-column">
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, natus doloribus modi molestiae, sed facilis corporis voluptatum similique, tempora excepturi in illum aut quam tenetur corrupti sequi dolore fuga ab.</p>
		<p>Doloremque beatae deleniti consequatur dolorem aliquam, amet saepe optio, maiores asperiores commodi nostrum quisquam vero ad est aspernatur odit eligendi repudiandae, facilis illum obcaecati ullam assumenda corporis. Iure, fuga delectus.</p>
		<p>Excepturi similique harum suscipit itaque iusto rem animi vero libero. Consequuntur, fuga, sed tempore ad reprehenderit illum officiis laborum nemo consectetur iste ducimus, nam saepe maxime. Reprehenderit ipsum esse, dolor!</p>
		<p>Id, pariatur dicta quisquam harum accusantium officia enim laudantium aliquid maiores soluta dolore exercitationem omnis debitis vel. Deleniti fugiat delectus eum, quaerat repellat, atque molestiae incidunt, aspernatur, tempora sequi reiciendis.</p>
		<p>Dolor, praesentium. Eos reprehenderit officiis eligendi, expedita tempora sint aliquid cumque vitae natus eius consequatur, quas nostrum similique autem quae in quos error animi? Laboriosam blanditiis quia sunt delectus, iusto.</p>
		<p>Veritatis provident ratione placeat aspernatur molestias temporibus. Quibusdam quaerat dignissimos, ullam laudantium incidunt voluptates ea laboriosam. Dolore necessitatibus rem a corporis pariatur assumenda nesciunt, veritatis quae quasi amet? Repudiandae, dolor.</p>
		<p>Possimus dignissimos illo qui eaque, porro quis. Quos voluptatibus inventore incidunt tempora nesciunt voluptas nihil aspernatur tempore laudantium, sunt eos recusandae nostrum ipsa repellendus molestias, blanditiis error illum! Veniam, voluptatibus?</p>
		<p>Assumenda nulla earum voluptas vero distinctio officia nobis laudantium quae. Voluptas, earum porro laborum autem, iure commodi repellendus esse, iusto perferendis numquam fugiat aperiam nesciunt. Hic eius ea quod, minima?</p>
		<p>Aliquid vitae facilis nisi, rerum nihil quo similique illo eveniet pariatur eaque repudiandae sed, aliquam nostrum assumenda, officiis quasi eius laudantium, accusantium ut. Tenetur laboriosam, illo in, consequatur aliquid odio?</p>
		<p>Reprehenderit alias saepe quae nostrum, quasi quaerat maiores. Illum, libero distinctio iusto, ab laudantium repudiandae necessitatibus voluptas magni eligendi suscipit placeat nobis vel veritatis? Perspiciatis facilis eligendi voluptas tenetur. Dolorum!</p>
	  								
	</div>
	
	<div class="right-column">
	  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, natus doloribus modi molestiae, sed facilis corporis voluptatum similique, tempora excepturi in illum aut quam tenetur corrupti sequi dolore fuga ab.</p>
		<p>Doloremque beatae deleniti consequatur dolorem aliquam, amet saepe optio, maiores asperiores commodi nostrum quisquam vero ad est aspernatur odit eligendi repudiandae, facilis illum obcaecati ullam assumenda corporis. Iure, fuga delectus.</p>
		<p>Excepturi similique harum suscipit itaque iusto rem animi vero libero. Consequuntur, fuga, sed tempore ad reprehenderit illum officiis laborum nemo consectetur iste ducimus, nam saepe maxime. Reprehenderit ipsum esse, dolor!</p>
		<p>Id, pariatur dicta quisquam harum accusantium officia enim laudantium aliquid maiores soluta dolore exercitationem omnis debitis vel. Deleniti fugiat delectus eum, quaerat repellat, atque molestiae incidunt, aspernatur, tempora sequi reiciendis.</p>
		<p>Dolor, praesentium. Eos reprehenderit officiis eligendi, expedita tempora sint aliquid cumque vitae natus eius consequatur, quas nostrum similique autem quae in quos error animi? Laboriosam blanditiis quia sunt delectus, iusto.</p>
		<p>Veritatis provident ratione placeat aspernatur molestias temporibus. Quibusdam quaerat dignissimos, ullam laudantium incidunt voluptates ea laboriosam. Dolore necessitatibus rem a corporis pariatur assumenda nesciunt, veritatis quae quasi amet? Repudiandae, dolor.</p>
		<p>Possimus dignissimos illo qui eaque, porro quis. Quos voluptatibus inventore incidunt tempora nesciunt voluptas nihil aspernatur tempore laudantium, sunt eos recusandae nostrum ipsa repellendus molestias, blanditiis error illum! Veniam, voluptatibus?</p>
		<p>Assumenda nulla earum voluptas vero distinctio officia nobis laudantium quae. Voluptas, earum porro laborum autem, iure commodi repellendus esse, iusto perferendis numquam fugiat aperiam nesciunt. Hic eius ea quod, minima?</p>
		<p>Aliquid vitae facilis nisi, rerum nihil quo similique illo eveniet pariatur eaque repudiandae sed, aliquam nostrum assumenda, officiis quasi eius laudantium, accusantium ut. Tenetur laboriosam, illo in, consequatur aliquid odio?</p>
		<p>Reprehenderit alias saepe quae nostrum, quasi quaerat maiores. Illum, libero distinctio iusto, ab laudantium repudiandae necessitatibus voluptas magni eligendi suscipit placeat nobis vel veritatis? Perspiciatis facilis eligendi voluptas tenetur. Dolorum!</p>
	</div>

</div>

</body>
</html>

我必须在CSS中为右列编写代码display:none;，因为当加载页面时，左列的高度等于右列的高度，并且在页面中出现大量空间左列，我不想要。由于右列比左列更薄，因此右列比左列更高。因此，左边的高度等于右边的高度。

我想让一个人的身高等于左边的身高。

编辑：问题是由Neverwinter解决的（谢谢），但是当我尝试用Firefox打开它时，问题仍然存在。奇怪的是，当我在firefox中刷新页面时，问题就消失了，一切似乎都很好。我只是想知道Firefox中是否有任何错误？（Firefox版本：40.0.2）

Answer 1

问题出在您使用

时

var leftH=$(".left-column").height();

你的左栏有全宽，因为你的right-column有display: none所以当你设置

$('.right-column').css('display', 'inline');

它需要一些宽度，因此.left-column的宽度会减小，并且由于.right-column高度增加，这是其高度不同的原因，您无法删除{{1} } display:none因为发生了你说的话。

如果您可以预先使用flexbox，可以使用：

＆＃13;

.left-column

＆＃13;

$(document).ready(function () {
    setHeight();

    $(window).resize(function(){
        setHeight();
    })
});

function setHeight(){
    $('.right-column').css('height', $(".left-column").outerHeight());
}

＆＃13;

*{
    box-sizing: border-box;
}
.columns-container {
  margin:8px auto 5px;
    overflow: hidden;
}
.left-column {
  width: calc(66% - 16px);  /* 2/3 (similar to flex: 2) of width minus the margin */
  float: left;
}
.right-column {
  width:  calc(33% - 16px);  /* 1/3 (similar to flex: 1) of width minus the margin */
  overflow-y: scroll;
  float: right;
}
.left-column, .right-column {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 8px;
  border-radius: 5px;
  box-shadow: 0 0 1px 1px #ccc;
  background: #f8f8f8;
  display: inline-block;
  vertical-align: top;
}

＆＃13;

请注意，即使您调整窗口宽度，它也会自动调整。

Here a working jsfiddle to play with

Answer 2

在左栏中定义高度（100％）：

.left-column{

-webkit-box-flex:2;

-webkit-flex:2;

    -ms-flex:2;

        flex:2; 
    height:100%;  

}

现在你有了理想的行为。但是，为了在浏览器调整大小时保留它（如果你需要），你需要调用函数来等于窗口大小调整的高度...并且 - 不要使用display：none !,我忘了，第二列......当然 - 不需要jssery设置css显示：内联，因此......

当然 - 演示：http://jsfiddle.net/poupu49z/

使用JQuery在HTML中等于2个布局的高度

2 个答案: