让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>
新答案:
我认为您只需要添加 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/
我正在尝试获得一个 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>
新答案: 我认为您只需要添加 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/