Question

美好的一天！我现在使用CSS和Bootstrap使用我的登录表单进行设计。如果我调整第二个div的大小，我想自动调整第一个div的高度。例如，在我的第二个div中，我放了

。我希望我的第一个div也会调整它的大小。

代码：

 <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
        </div>  
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #000000;">
        <form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center text-center">
            <br/><br/><br/><br/><br/><br/>
            <p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
            password to login.</p><br/><br/>
            <div class="form-group">
                <div class="col-xs-6">
                    <div class="inner-addon right-addon">
                        <i class="glyphicon glyphicon-user"></i>
                        <input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;">
                    </div>
                </div>
            </div><br/><br/>
            <div class="form-group">
                <div class="col-xs-6">
                    <div class="inner-addon right-addon right-addon-1">
                        <i class="glyphicon glyphicon-lock"></i>
                        <input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
                    </div>
                </div>
            </div>
            <br/><br/>
            <span class="button-checkbox">
                <button type="button" class="btn" data-color="info">Stay Signed In</button>
                <input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">

            </span>
            <a href="<?=base_url()?>login/forgotpassword" class="btn btn-link">Forgot Password?</a>

            <div class="row" style="margin-top: 35px;">
                <div class="col-xs-6 col-sm-6 col-md-6">
                    <input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
                </div>
            </div>  
        </form>
    </div>
 </div>

这是输出：

第一个div - 绿色第二个div - 黑色

你可以看到他们没有相同的身高。我想绿色的也会调整黑色的高度。

Answer 1

我为你做了：的 CSS：

.flexbox { display: -webkit-flex; display: -ms-flexbox; display: flex; } .flexbox .col { flex: 1; position: relative; }

<强> HTML：

<div class="container"> <div class="row flexbox"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 col" style="background: #1b4d32;"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 col" style="background: #000000;"> <form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center text-center"> <br/><br/><br/><br/><br/><br/> <p id="sign-lbl" style="text-align: center">Please enter your username and<br/> password to login.</p><br/><br/> <div class="form-group"> <div class="col-xs-6"> <div class="inner-addon right-addon"> <i class="glyphicon glyphicon-user"></i> <input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;"> </div> </div> </div><br/><br/> <div class="form-group"> <div class="col-xs-6"> <div class="inner-addon right-addon right-addon-1"> <i class="glyphicon glyphicon-lock"></i> <input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;"> </div> </div> </div> <br/><br/> <span class="button-checkbox"> <button type="button" class="btn" data-color="info">Stay Signed In</button> <input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden"> </span> <a href="<?=base_url()?>login/forgotpassword" class="btn btn-link">Forgot Password?</a> <div class="row" style="margin-top: 35px;"> <div class="col-xs-6 col-sm-6 col-md-6"> <input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In"> </div> </div> </form> </div> </div> </div>

这是预览链接： https://codepen.io/ziruhel/pen/ZaWdrM

即使您使用bootstrap 4，也可以在没有任何额外代码的情况下完成。请参阅链接：http://getbootstrap.com.vn/examples/equal-height-columns/

Answer 2

你还可以加入你的CSS吗？我的建议是尝试确保显示设置并尝试最小高度？

从我从截图中看到的是，它填充了包含它的文本的100％，但是，请尝试最小高度

CSS - 自动调整其他div的高度

2 个答案: