如何使次要div始终具有与第一个div相同的高度？
[英]How to get a secondary div to always have the same height as the first div?
问题描述
I have two divs, called signin and info . 
我有两个div，分别称为signin和info 。
I want to make info to always have the same height as signin and if the text inside doesnt fit to make info have a scrollbar. 我想使信息始终具有与signin相同的高度，并且如果其中的文本不适合使info具有滚动条。
Is it possible to obtain this via some simple JS, html and css? 是否有可能通过一些简单的JS，html和css获得？ Here is what i have tried: 这是我尝试过的：
var firstDivHeight = document.getElementById('#signin').clientHeight;
document.getElementById("#info").style.height = firstDivHeight;
Here is a jsfiddle with all my html and css http://jsfiddle.net/sleshwave/4v7bvw5o/ 这是我所有的html和css的jsfiddle http://jsfiddle.net/sleshwave/4v7bvw5o/
Thank you. 谢谢。
4 个解决方案
解决方案1
0 2015-09-05 15:26:27
Change a little the structure and use the display:table/table-cell; 稍微改变一下结构，然后使用display：table / table-cell; properties. 属性。 http://jsfiddle.net/4v7bvw5o/3/ 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>
解决方案2
0 2015-09-05 15:33:23
GCyrillus's solution is better because it doesn't require javascript , you could also try a similar layout using flexbox . GCyrillus的解决方案更好，因为它不需要javascript ，也可以使用flexbox尝试类似的布局。
If you want to use javascript however, this should work. 但是，如果您想使用javascript ，则应该可以使用。
var firstDiv = document.getElementById('signin');
var secondDiv = document.getElementById('info');
secondDiv.style.height = firstDiv.clientHeight + 'px';
Notice that this code should only run when the page is already loaded! 请注意，此代码仅应在页面已加载时运行！
解决方案3
0 已采纳 2015-09-05 15:44:39
I would use display:table , in most cases, too, BUT because of your specific requests: 由于您的特定要求，我也会在大多数情况下使用display:table ：
1) info bar should have same height as form bar (not vice versa, #signin dictates info bar height) 1） 信息栏的高度应与表单栏的高度相同（反之亦然，＃signin指示信息栏的高度）
2) info bar can have more content, and needs scrollbar, too 2） 信息栏可以有更多内容，也需要滚动条
i would use this: 我会用这个：
window.onload = function(){
firstDivHeight= document.getElementById('signin').offsetHeight;
document.getElementById("info").style.height = firstDivHeight+'px';
}
In css: 在CSS中：
#info {
background-color: red;
float: left;
margin-left: 2%;
overflow-y:auto;
width:50%; //add desired width
}
Demo: http://jsfiddle.net/29mzjq5x/3/ 演示： http : //jsfiddle.net/29mzjq5x/3/
Notice: i've used offsetHeight, rather than clientHeight, because it will calculate paddings, and borders too... 注意：我使用了offsetHeight而不是clientHeight，因为它也会计算填充和边框...
解决方案4
0 2015-09-05 15:52:57
I don't like to use table for layout. 我不喜欢使用表格进行布局。 You can use flex box layout, it has a good support in all major browsers. 您可以使用弹性框布局，它在所有主要浏览器中都有很好的支持。 http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
Suggested solution: 建议的解决方案：
Include both divs (.col) in other container (#container-div)and display it as flex 将两个div（.col）都包含在其他容器（＃container-div）中，并将其显示为flex
#container-div {
Display: flex;
}
Use flex-grow property to grow the flex item to full width. 使用flex-grow属性将flex项目增长到全宽。
.col{
Flex: 1;
}
Don't forget to add vendor prefixes to support all browsers 不要忘记添加供应商前缀以支持所有浏览器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.