0

My problem is that I can't make the div megrendeles_right_box always 100% height.

I tried with height:100%; and min-height:100%;, but it's not working properly except for the padding.

Also, I wrote these styles for the body, but it's still not working.

Does this problem occur only because of using Bootstrap? I've added my styles here.

What am I doing wrong?

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

Some css for this:

.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; }
Juan José Melero Gómez
  • 2,742
  • 2
  • 19
  • 36
max777
  • 143
  • 5
  • 18

2 Answers2

2

thats because your parent div doesn't have a height. percentage is a relative quantity right? But you can still use 100vh for full screen height

Faizal Hussain
  • 1,551
  • 2
  • 10
  • 18
  • may be worth noting that, because of this, the div's 100% height = height of contents rather than parent – treyBake Nov 28 '18 at 09:05
  • So what am i have to do? – max777 Nov 28 '18 at 09:06
  • @max777 i'm trying to understand what you are trying to do. can you put your code on fiddler so we can see its bahviour live and tell me what exactly you're trying to achive?. I ran the code on my end and i see a grey box underneeth the form.. so not really understand. – Kosem Nov 28 '18 at 09:11
  • Green? Where? That not my code. – max777 Nov 28 '18 at 09:13
0

Try this..

.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>
Sooriya Dasanayake
  • 1,106
  • 1
  • 7
  • 14