Getting divs to be the same height on a modal - html

Question

I'm trying to get a css only modal popup have 33% rows inside of one of it's containers, however it does not use the space it's allocated. Each row should have the same height (a third of the height left). I've included a fiddle.
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.table {
display: table;
}
.table_cell {
display: table-cell;
}
.full_width {
width: 100%;
}
.full_height {
height: 100%;
}
.third_width {
height: 33.3333%
}
.dark_grey {
background-color: rgb(60, 60, 60);
}
.light_grey {
background-color: rgb(220, 220, 220);
}
.modal_top {
padding: 33px;
}
.modal_close {
float: right;
}
The html:
<div id="open_modal" class="modalDialog full_width">
<div class="table full_width full_height">
<div class="modal_container table_cell full_width">
<div class="modal_content full_width full_height">
<div class="modal_top">
<span class="modal_title">This title throws off the height</span>
X
</div>
<div class="full_height">
<div class="modal_option third_width light_grey">Row 1</div>
<div class="modal_option third_width dark_grey">Row 2</div>
<div class="modal_option third_width light_grey">Row 3</div>
</div>
</div>
</div>
</div>
</div><a href="#open_modal" />Open Modal</a>
https://jsfiddle.net/r7v10kjo/

Answer 1

NEW ANSWER:
I think that all you needed was table rows added. So reworking your html like this:
<div id="open_modal" class="modalDialog">
<div class="modal_container">
<div class="modal_top">
<div class="table_cell title_cell">
<span class="modal_title">This title does not throw off the height</span>
X
</div>
</div>
<div class="modal_body">
<div class="table_cell">
<div class="modal_option light_grey">Row 1</div>
<div class="modal_option dark_grey">Row 2</div>
<div class="modal_option light_grey">Row 3</div>
</div>
</div>
</div>
</div>
<a href="#open_modal" />Open Modal</a>
and your css like this:
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modal_container {display:table;width:100%; height:100%;}
.modal_top, .modal_body {display:table-row;}
.table_cell {display:table-cell;}
.title_cell {padding:30px;vertical-align:middle;}
.modal_close {float: right;}
.modal_body {height:100%;}
.modal_option {height:33.33333%;}
.dark_grey {background-color: rgb(60, 60, 60);}
.light_grey {background-color: rgb(220, 220, 220);}
gets you what you want, I think.
https://jsfiddle.net/maguijo/uvnm3enz/