让div在模态上具有相同的高度

Getting divs to be the same height on a modal

我正在尝试获得一个 css 只有模态弹出窗口在其中一个容器内有 33% 的行,但是它不使用它分配的 space。每行应具有相同的高度(左侧高度的三分之一)。我添加了 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;
}

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>
                    <a href="#close" title="Close" class="modal_close">X</a>
                </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/

新答案: 我认为您只需要添加 table 行。所以像这样改造你的html:

<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>
                <a href="#close" title="Close" class="modal_close">X</a>
            </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>

你的 css 是这样的:

.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);}

我认为可以满足您的需求。 https://jsfiddle.net/maguijo/uvnm3enz/