使div始终为100％高度[重复]

Question

我的问题是我不能让 div megrendeles_right_box 总是 100% 的高度。

我尝试使用 height:100%; 和 min-height:100%;，但除了填充之外它无法正常工作。

另外，我为 body 编写了这些样式，但仍然无法正常工作。

是否仅因为使用 Bootstrap 而出现此问题？我在这里添加了我的样式。

我做错了什么？

<div class="megrendeles_main_container">
<div class="col-md-6 megrendeles_left_box">
    <form method="post">
        <h2 class="megrendeles_form_title">Személyes adatok</h2>
        <div class="form-group col-md-4">
            <span class="megrendeles_input_title">Vezetéknév *</span>
            <input required type="text" name="user_vnev" id="user_vnev" class="form-control megrendeles_input_2 input-lg" value="">
        </div>
        <div class="form-group col-md-4">
            <span class="megrendeles_input_title">Keresztnév *</span>
            <input required type="text" name="user_knev" id="user_knev" class="form-control megrendeles_input_2 input-lg" value="">
        </div>
        <div class="clearfix"></div>
        <div class="form-group col-md-8">
            <span class="megrendeles_input_title">E-mail *</span>
            <input required type="text" name="user_email" id="user_email" class="form-control megrendeles_input_2 input-lg" value="">
        </div>
        <div class="clearfix"></div>
        <div class="form-group col-md-8">
            <span class="megrendeles_input_title">Telefonszám *</span>
            <input required type="text" name="user_tel" id="user_tel" class="form-control megrendeles_input_2 input-lg" value="">
        </div>
    </form>
</div>
<div class="col-md-6 megrendeles_right_box">

</div>
<div class="clearfix"></div>

一些CSS：

.megrendeles_main_container{ width:100%;  }


.megrendeles_form_title{ padding:0 15px; display:block; margin-bottom:15px; color:#1e1e1e; font-size:22px; font-weight:700; }


.megrendeles_left_box{ background:#fff; height:100%; padding:40px; }
.megrendeles_right_box{ background:#efefef; height:100%; padding:40px; }

Answer 1

那是因为你的父 div 没有高度。百分比是相对数量吧？但是你仍然可以使用 100vh 作为全屏高度

Answer 2

试试这个..

.megrendeles_right_box{ height:100vh; }

 .megrendeles_main_container{ width:100%;  }


.megrendeles_form_title{ padding:0 15px; display:block; margin-bottom:15px; color:#1e1e1e; font-size:22px; font-weight:700; }


.megrendeles_left_box{ background:#fff; height:100%; padding:40px; }
.megrendeles_right_box{
   background:#efefef;
   height:100vh; /*change this*/
   padding:40px; 
   }

<div class="megrendeles_main_container">
<div class="col-md-6 megrendeles_left_box">
    <form method="post">
        <h2 class="megrendeles_form_title">Személyes adatok</h2>
        <div class="form-group col-md-4">
            <span class="megrendeles_input_title">Vezetéknév *</span>
            <input required type="text" name="user_vnev" id="user_vnev" class="form-control megrendeles_input_2 input-lg" value="">
        </div>
        <div class="form-group col-md-4">
            <span class="megrendeles_input_title">Keresztnév *</span>
            <input required type="text" name="user_knev" id="user_knev" class="form-control megrendeles_input_2 input-lg" value="">
        </div>
        <div class="clearfix"></div>
        <div class="form-group col-md-8">
            <span class="megrendeles_input_title">E-mail *</span>
            <input required type="text" name="user_email" id="user_email" class="form-control megrendeles_input_2 input-lg" value="">
        </div>
        <div class="clearfix"></div>
        <div class="form-group col-md-8">
            <span class="megrendeles_input_title">Telefonszám *</span>
            <input required type="text" name="user_tel" id="user_tel" class="form-control megrendeles_input_2 input-lg" value="">
        </div>
    </form>
</div>
<div class="col-md-6 megrendeles_right_box">

</div>
<div class="clearfix"></div>