Question

我的问题是我无法使div megrendeles_right_box始终保持100％的高度。

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

我还为身体编写了这些样式，但是仍然无法正常工作。

是否仅由于使用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>

使div始终保持100％的高度

2 个答案: