我有两个div，分别叫signin和info。
我想使信息始终具有与signin相同的高度，并且如果里面的文本不适合使info具有滚动条。如何让第二个div始终与第一个div具有相同的高度？
是否有可能通过一些简单的JS，HTML和CSS来获取？ 这里是我曾尝试：
var firstDivHeight = document.getElementById('#signin').clientHeight;
document.getElementById("#info").style.height = firstDivHeight;
这是我所有的HTML和CSS一的jsfiddle http://jsfiddle.net/sleshwave/4v7bvw5o/
谢谢。
我会用，在大多数情况下，也不过是因为你的具体要求display:table：
1）信息栏应该有相同的高度，形式栏（而不是相反，#signin指示信息栏高度）
2）信息栏可以有更多的内容，需要滚动条，也
我这样做：
window.onload = function(){
firstDivHeight= document.getElementById('signin').offsetHeight;
document.getElementById("info").style.height = firstDivHeight+'px';
}
在CSS：
#info {
background-color: red;
float: left;
margin-left: 2%;
overflow-y:auto;
width:50%; //add desired width
}
演示：http://jsfiddle.net/29mzjq5x/3/
注意：我使用的offsetHeight，而不是clientHeight，因为它会计算填充和边框太...
改变一下结构并使用display：table/table-cell;属性。 http://jsfiddle.net/4v7bvw5o/3/
@import http://fonts.googleapis.com/css?family=Roboto;
#signin {
display:table;
border-spacing:1em;
}
form {
background-color: red;
width: 20%;
margin-left: 2%;
text-align: center;
display:table-cell;
}
input[type=text], input[type=password], input[type=email] {
width: 92%;
padding:10px;
margin-top:8px;
border:1px solid #ccc;
padding-left:5px;
font-size:16px;
font-family:Roboto;
background-color: rgba(211, 211, 211, 0.3);
}
#info {
background-color: red;
display:table-cell;
}
input[type=submit] {
width:92%;
background-color:#1471BF;
color:#fff;
border:2px solid #1471BF;
padding:10px;
font-size:20px;
cursor:pointer;
font-family: Roboto;
margin-bottom:15px;
-webkit-transition:border 0.3s, background-color 0.3s;
transition:border 0.3s, background-color 0.3s;
}
input[type=submit]:hover {
background-color: #B93948;
border:2px solid #B93948;
}<!doctype html>
<title>New account</title>
<body style="background-color:#232324">
<h1 style="text-align:center">Creating a new account</h1>
<div id="signin">
<form>
<br>
<label>Username</label>
<p></p>
<input id="name" name="username" type="text">
<p></p>
<label>Email</label>
<p></p>
<input id="email" name="email" type="email">
<p></p>
<label>Name</label>
<p></p>
<input id="nume" name="name" type="text">
<p></p>
<label>Last Name</label>
<p></p>
<input id="prenume" name="lastname" type="text">
<p></p>
<label>Password</label>
<p></p>
<input id="password" name="password" type="password">
<p></p>
<label>Confirm password</label>
<p></p>
<input id="repassword" name="password_conf" type="password">
<p></p>
<input name="submit" type="submit" value=" Register">
</form>
<div id="info">
<p>This is the story about a guy named blue</p>
</div>
</div>
</body>非常感谢你，它在某种程度上works.The唯一的问题是，它没有一个滚动条时，添加文本和它看起来像登入与信息长度相同，而不是相反。还是非常感谢！ –
@StefanPricope也许是你想要帮助的屏幕:) –
GCyrillus's解决方案是更好，因为它不需要javascript，你也可以使用flexbox尝试类似的布局。
但是，如果你想使用javascript，这应该工作。
var firstDiv = document.getElementById('signin');
var secondDiv = document.getElementById('info');
secondDiv.style.height = firstDiv.clientHeight + 'px';
请注意，该代码应该只在页面已经加载时才运行！
我不喜欢使用表格进行布局。 你可以使用弹性盒布局，它在所有主流浏览器中都有很好的支持。 http://caniuse.com/#feat=flexbox
建议解决方案：
包括的div（。COL）在其他容器（＃集装箱-DIV），并显示为柔性
#container-div {
Display: flex;
}
使用Flex-成长属性柔性项增长到全宽。
.col{
Flex: 1;
}
不要忘记添加供应商前缀支持所有浏览器
我忘了提及，我已经尝试过使用flexbox，它似乎没有做任何事情。尽管谢谢您的帮助！ –
我得到它的工作，请检查这个小提琴： https://jsfiddle.net/EiyadZ/570L8yx5/ –
有关滚动的更新： 要具有滚动行为，您应该指定列的最大高度。否则，弹性项目会随着您添加内容而不断增长并始终处于相同的高度。 https://jsfiddle.net/EiyadZ/570L8yx5/6/ –
它完美的工作！非常感谢你 –
虽然我注意到一个小问题。这两个div设置为在页面加载时具有相同的高度，但如果窗口更改了info div，将不会与登录的高度相同 –
@StefanPricope，您必须在调整大小：https：// developer上添加相同的计算。 mozilla.org/en-US/docs/Web/Events/resize – sinisake