css - 设置两个div之间的div高度

Question

我试图让一个 div 高度占用两个 div 之间的剩余空间。

<div id='company_col' class='contact_columns'>
  <div id='company_title' class ='col_title'>
	  <h3>Company</h3>
	</div>
  <hr>
  <div id='company_list' class='contact_lists'>
  </div>
  <div id='company_edit_bar' class='edit_bar'>
    <div id='company_add_btn' class='edit_btn'>
	    <i class='fa fa-plus' aria-hidden='true'></i>
	  </div>
  <div id='company_delete_btn' class='edit_btn'>
	  	<i class='fa fa-minus' aria-hidden='true'></i>
  </div>
</div>

这是 JS fiddle :https://jsfiddle.net/xqLpqsdk/

我需要制作 .contact_lists 来填充 .col_title 和 .edit_bar 之间的空间，这样滚动条只显示在这两个 div 之间

我试过将 .contact_lists 设为绝对位置，但没用。

Answer 1

如果我没记错，这将解决您的问题。请看看这个，

#contact_editor_wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 10000;
}

#contact_editor {
display: block;
position: absolute;
width: 100%;
max-width: 1400px;
height: 100%;
min-height: 400px;
max-height: 800px;
background-color: #99AFC5;
border: solid 1px black;
border-radius: 10px;
margin: 0 auto;
padding: 2.5px 5px;
}
#x_contact_editor {
display: inline-block;
position: absolute;
right: 5px;
cursor: pointer;
}
.contact_editor_row {
margin: .5% 0;
}
#contact_editor_title_wrapper {
display: block;
width: 100%;
height: 4%;
}
#contact_editor_title {
padding: 6px 0;
text-align: center;
font-size: 20px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
#contact_columns {
display: flex;
height: 89%;
width: 100%;
flex-direction: row;
justify-content: center;
}
.contact_columns {
display: flex;
flex-flow: column;
height: 100%;
background-color: white;
margin: 0 .25%;
border: 1px solid black;
border-radius: 5px;
overflow: hidden;
}
#type_col {
width: 14.5%;
}
#company_col {
width: 42%;
}
#contact_col {
width: 42%
}
#contact_editor_btns {
display: block;
width: 100%;
height: 4%;
}
.col_title {
display: block;
text-align: center;
width: 100%;
height: auto;
margin-top: 9px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
border-bottom: 1px solid black;
}
.contact_lists {
position: relative;
height: 100%;
overflow-y: scroll;
}
.edit_bar {
display: block;
//position: absolute;
bottom: 0;
width: 100%;
height: auto;
border-top: 1px solid black;
border-radius: 0 0 5px 5px;
background-color: #00162C;
}
.edit_btn {
color: white;
display: inline-block;
height: 100%;
margin: 0;
padding: 0;
border-right: 1px solid black;
transition: all .5s ease;
}
.edit_btn:hover {
background-color: #99AFC5;
transition: all .5s ease;
}
.edit_btn i {
margin: 4px 8px;
}
#company_delete_btn, #contact_delete_btn {
margin-left: -2.5px;
}

<div id='contact_editor_wrapper' class='hide_contact_editor'>
	<div id='contact_editor'>
		<div id='x_contact_editor'>
			<i class='fa fa-times' aria-hidden='true'></i>
		</div>
		<div id='contact_editor_title_wrapper' class='contact_editor_row'>
			<div id='contact_editor_title'>Contact Editor</div>
		</div>
		<div id='contact_columns' class='contact_editor_row'>
			<div id='type_col' class='contact_columns'>
				<div id='type_title' class ='col_title'>
					<h3>Type</h3>
				</div>
				<hr>
				<div id='type_list' class='contact_lists'>
					
				</div>
			</div>
			<div id='company_col' class='contact_columns'>
				<div id='company_title' class ='col_title'>
					<h3>Company</h3>
				</div>
				<hr>
				<div id='company_list' class='contact_lists'>
					
				</div>
				<div id='company_edit_bar' class='edit_bar'>
						<div id='company_add_btn' class='edit_btn'>
							<i class='fa fa-plus' aria-hidden='true'></i>
						</div>
						<div id='company_delete_btn' class='edit_btn'>
							<i class='fa fa-minus' aria-hidden='true'></i>
						</div>
				</div>
			</div>
			<div id='contact_col' class='contact_columns'>
				<div id='contact_title' class ='col_title'>
					<h3>Contact</h3>
				</div>
				<hr>
				<div id='contact_list' class='contact_lists'>
					
				</div>
				<div id='contact_edit_bar' class='edit_bar'>
						<div id='contact_add_btn' class='edit_btn'>
							<i class='fa fa-plus' aria-hidden='true'></i>
						</div>
						<div id='contact_delete_btn' class='edit_btn'>
							<i class='fa fa-minus' aria-hidden='true'></i>
						</div>
				</div>
			</div>
		</div>
		<div id='contact_editor_btns' class='contact_editor_row'>
		</div>
	</div>
</div>