我希望我的表格(class="body") 的高度 自动适合页眉div 和页脚div 之间的剩余空间。这些树 div 被包裹在一个 div 中，它的位置是固定的并且在屏幕上居中。
更新:
JSFiddle with Flex或者 JSFiddle w\o Flex
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=greek,latin-ext');
.dp-container {
position: fixed;
font-size: 16px;
font-weight: 600;
background-color: #EEE;
color: #333;
border-radius: 5px;
padding: 3px;
text-align: center;
line-height: 1.2;
z-index: 50;
font-family: "Open Sans", "proxima-nova", Helvetica, sans-serif;
margin: auto;
min-width: 256px;
max-width: 666px;
width: 100%;
max-height: 80%;
height: 434px;
text-transform: capitalize;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.dp-header {
position: relative;
margin-top: auto;
margin-bottom: auto;
margin-top: .75em;
line-height: 1.5;
cursor: default;
}
.dp-body {
/*height: auto;*/
/* width: 100%; */
}
.dp-footer {
position: absolute;
left: 15px;
right: 15px;
padding: 0;
bottom: 1em;
}
.dp-container a {
color: #333;
text-decoration: none;
}
.dp-container a:hover {
color: #0089ec;
}
/*.dp-container > * {*/
/*margin-top: 7px;*/
/*}*/
.dp-container * {
text-align: center;
}
.dp-title {
display: inline-block;
width: 60%;
word-spacing: 5px;
font-size: 1.2em;
cursor: pointer;
}
.dp-month:hover {
color: #0089ec;
}
.dp-month {
font-weight: 600;
cursor: pointer;
}
.dp-header .dp-year {
color: #888;
font-weight: 400;
}
.dp-arrow-left, .dp-arrow-right {
position: absolute;
display: inline-block;
top: -0.2em;
padding: 0 .3em;
cursor: pointer;
}
.dp-arrow-right {
right: .2em;
}
.dp-arrow-left {
left: .2em;
}
.dp-table tbody>tr {
height: 30%;
}
.dp-table {
margin: .75em 0;
height: 100%;
}
.dp-table>tbody>tr>td, .dp-table>tbody>tr>th, .dp-table>tfoot>tr>td, .dp-table>tfoot>tr>th, .dp-table>thead>tr>td, .dp-table>thead>tr>th
{
border: none;
vertical-align: middle;
padding: 0;
}
.dp-table td:hover {
background-color: #b1dcfb;
}
.dp-table tr {
margin: 0 auto;
padding: 0;
}
.dp-table tr>* {
cursor: pointer;
}
.dp-table th {
color: #888;
font-weight: 400;
font-size: .75em;
width: 12.5%;
}
.dp-table td>div{
position: relative;
display: block;
}
.dp-table td>div, .dp-table th>div {
padding: .625em 0;
}
.dp-table td.today>*:before {
content: " ";
position: absolute;
top: 2px;
right: 2px;
width: 0;
height: 0;
border-top: 0.5em solid #0059bc;
border-left: .5em solid transparent;
}
.dp-table td[disabled] {
color: #BBB;
}
.dp-table thead th {
padding-bottom: .25em;
}
.dp-table tbody th {
padding-right: .25em;
}
.dp-table td:hover {
background-color: #b1dcfb;
}
.dp-table tr>*.selected {
background: #0089ec;
color: #EEE;
}
.dp-footer button.dp-btn {
width: 33%;
margin: 0 -1px;
padding: .66em 0;
vertical-align: bottom;
display: inline-block;
border: none;
background-color: transparent;
font-weight: bolder;
font-size: 1em;
}
.dp-footer button.dp-btn:hover {
background-color: #b1dcfb;
}
.dp-table.dp-months-table {
font-size: 20px;
}
.dp-table.dp-months-table tr>* {
padding: 1.2em 0;
background-repeat: no-repeat;
background-origin: border-box;
background-size: cover;
font-weight: bolder;
color: #202020;
text-shadow: 0 0 20px rgba(84,184,242,0.91) , 1px 1px 6px rgba(223,223,223, 0.91) , -1px -1px 6px rgba(223,223,223, 0.91) ;
}
.dp-table.dp-months-table tr>*:hover {
color: #0089ec;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/f63e015aa3.js"></script>
<span style="position: fixed; color: red; font-weight: 800;width: 100%; text-align: center">
Resize the window to see the problem (<i>smaller</i>)
</span>
<div class="dp-container">
<div class="dp-header">
<a><i class="fa fa-caret-left fa-3x dp-arrow-left" aria-hidden="true"></i></a>
<span class="dp-title"><a class="dp-month">June</a> <i class="dp-year">2017</i></span>
<a><i class="fa fa-caret-right fa-3x dp-arrow-right" aria-hidden="true"></i></a>
</div>
<div class="container-fluid dp-body">
<table class="table table-sm dp-table dp-months-table">
<tbody>
<tr>
<td class="january"><div>January</div></td>
<td class="february"><div>February</div></td>
<td class="march"><div>March</div></td>
<td class="april"><div>April</div></td>
</tr>
<tr>
<td class="may"><div>May</div></td>
<td class="june"><div>June</div></td>
<td class="july"><div>July</div></td>
<td class="august"><div>August</div></td>
</tr>
<tr>
<td class="september"><div>September</div></td>
<td class="october"><div>October</div></td>
<td class="november"><div>November</div></td>
<td class="december"><div>December</div></td>
</tr>
</tbody>
</table>
<table class="table table-sm dp-table dp-days-table">
<thead>
<tr>
<th></th>
<th><div>Sun</div></th>
<th><div>Mon</div></th>
<th><div>Tue</div></th>
<th><div>Wed</div></th>
<th><div>Thu</div></th>
<th><div>Fri</div></th>
<th><div>Sat</div></th>
</tr>
</thead>
<tbody>
<tr>
<th class="dp-week-num"><div>8</div></th>
<td disabled><div>28</div></td>
<td disabled><div>29</div></td>
<td disabled><div>30</div></td>
<td disabled><div>31</div></td>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
<tr>
<th class="dp-week-num"><div>9</div></th>
<td><div>4</div></td>
<td><div>5</div></td>
<td><div>6</div></td>
<td><div>7</div></td>
<td><div>8</div></td>
<td><div>9</div></td>
<td><div>10</div></td>
</tr>
<tr>
<th class="dp-week-num"><div>10</div></th>
<td><div>11</div></td>
<td><div>12</div></td>
<td><div>13</div></td>
<td><div>14</div></td>
<td><div>15</div></td>
<td><div>16</div></td>
<td><div>17</div></td>
</tr>
<tr>
<th class="dp-week-num"><div>11</div></th>
<td><div>18</div></td>
<td><div>19</div></td>
<td class="today selected"><div>20</div></td>
<td><div>21</div></td>
<td><div>22</div></td>
<td><div>23</div></td>
<td><div>24</div></td>
</tr>
<tr>
<th class="dp-week-num"><div>12</div></th>
<td><div>25</div></td>
<td><div>26</div></td>
<td><div>27</div></td>
<td><div>28</div></td>
<td><div>29</div></td>
<td><div>30</div></td>
<td disabled><div>1</div></td>
</tr>
<tr>
<th class="dp-week-num"><div>13</div></th>
<td disabled><div>2</div></td>
<td disabled><div>3</div></td>
<td disabled><div>4</div></td>
<td disabled><div>5</div></td>
<td disabled><div>6</div></td>
<td disabled><div>7</div></td>
<td disabled><div>8</div></td>
</tr>
</tbody>
</table>
</div>
<div class="dp-footer">
<button type="button" class="dp-btn dp-btn-today">Today</button>
<button type="button" class="dp-btn dp-btn-clear">Clear</button>
<button type="button" class="dp-btn dp-btn-close">Close</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(()=>{
$('div.dp-container .dp-table.dp-days-table').hide();
$('div.dp-container').each((i,container)=>{
$(container).find('.dp-title').on('click', e=>{
$(container).find('.dp-body>table.dp-table.dp-days-table').toggle();
$(container).find('.dp-body>table.dp-table.dp-months-table').toggle();
});
});
});
</script>注意:我希望 body div 随窗口调整大小
最佳答案
您必须全屏显示它或在编辑器中查看它，因为预览显示不正确。但这应该可以解决您的问题。
我删除了所有多余的代码，以便更容易看到发生了什么。
这里有一个很棒的 flexbox 指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
它的基础 display: flex; 这里定义了一个flex容器；它为其所有直接子级启用 flex 上下文。
flex-direction row 已经是从左到右显示元素的默认设置。
flex-wrap 默认情况下，flex 元素将尝试全部放在一行中。所以这被设置为wrap.
将 flexbox .flexbox item 内的元素间距定义为 28% 或小于总宽度减去边距的三分之一和四分之一以上的任何部分，大约介于26-33% 将使 flexbox 显示三行。
对齐方式:
justify-content 这定义了沿主轴的对齐方式。
align-items 这定义了 flex 元素如何沿当前行的交叉轴布局的默认行为。
align-content 这会在 flex 容器内对齐
flex-start (default): items are packed toward the start line
flex-end: items are packed toward to end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
引自 CSS 技巧
main {
display: flex;
align-items: center;
padding: 1%;
background: #ff0000;
}
header span {
display: flex;
padding: 1%;
margin: auto;
}
.nav {
background: #008000;
color: #fff;
text-align: center;
}
.flexbox {
display: flex;
justify-content: space-between;
text-align: center;
height: auto;
padding: 1%;
flex-wrap: wrap;
}
.flexbox item {
width: 30%;
padding: 1% 2%;
background: #00ffff;
margin: 1% 0;
align-self: center;
}
.footer {
background-color: purple;
padding: 2%;
display: flex;
flex-basis: 0;
justify-content: space-around;
text-align: center;
}
.footer item {
padding: 1% 2%;
background: #eee;
border-radius: 5px;
width: 30%;
font-weight: bold;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<main>
<header class="nav">
<span>< Prev / Next ></span>
</header>
<div class="flexbox">
<item>td-1</item>
<item>td-2</item>
<item>td-3</item>
<item>td-1</item>
<item>td-2</item>
<item>td-3</item>
<item>td-1</item>
<item>td-2</item>
<item>td-3</item>
</div>
<div class="footer">
<item>Open</item>
<item>Clear</item>
<item>Close</item>
</div>
</main>
</body>关于javascript - CSS Fit div Height 自动适应两个div之间的可用空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44702113/