Question

我有两个div，名为signin和info 我想让信息始终与signin具有相同的高度，如果内部的文字不适合使info有一个滚动条。

是否有可能通过一些简单的JS，html和css获得这个？这是我尝试过的：

var firstDivHeight = document.getElementById('#signin').clientHeight;
document.getElementById("#info").style.height = firstDivHeight;

这是一个包含所有html和css http://jsfiddle.net/sleshwave/4v7bvw5o/

的jsfiddle

谢谢。

Answer 1

改变一点结构并使用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>

Answer 2

GCyrillus's解决方案更好，因为它不需要javascript，您也可以使用flexbox尝试类似的布局。

但是，如果你想使用javascript，这应该可行。

var firstDiv = document.getElementById('signin');
var secondDiv = document.getElementById('info');  

secondDiv.style.height = firstDiv.clientHeight + 'px';

请注意，此代码只应在页面已加载时运行！

Answer 3

在大多数情况下，我会使用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，因为它会计算填充和边界......

Answer 4

我不喜欢使用表格进行布局。您可以使用弹性框布局，它在所有主流浏览器中都有很好的支持。 http://caniuse.com/#feat=flexbox

建议的解决方案：

在其他容器（＃container-div）中包含两个div（.col）并将其显示为flex

#container-div {
 Display: flex;
}

使用flex-grow属性将弹性项目增大到全宽。

.col{
Flex: 1;
}

不要忘记添加供应商前缀以支持所有浏览器

如何让二级div始终与第一个div具有相同的高度？

4 个答案: