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

你好！我现在正在使用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>

读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时出于偶然，有时出于故意（注入幽默等）

你也可以包括你的CSS吗？我的建议是尝试并确保显示器已设置，然后尝试最小高度

从您的屏幕截图中我看到，它填充了包含它的文本的100%，但是，请尝试最小高度，我为您做了：
CSS:

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

 <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>

HTML:

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

 <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>


读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时出于偶然，有时出于故意（注入幽默等）

这是输出：这里是预览链接：我回答下面的问题，使用css3 flex布局，甚至可以使用表布局。如果你需要进一步的帮助，请让我知道即使你使用引导4，你可以做它没有任何额外的代码。请看链接：在这个JS小提琴中，它100%显示给父div？如果它显示不正确，请尝试清除浏览器的缓存。看到这里，我所做的就是添加正确的外部链接