【发布时间】：2017-06-22 14:20:24
【问题描述】：
我希望我的表格 (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 随窗口调整大小
【问题讨论】：
-
在
table上设置：margin:auto。 -
看看 flexbox 模型
-
您的示例中有很多不必要的代码，您应该使用 HTML 代码将 显示为标准字符 <和>。否则你可能会破坏某些东西。不知道为什么在示例中未使用任何脚本库时包含脚本库。给我一分钟，我会尽量减少它。不过，我的例子会更基本一点……
-
@mr.void 我尝试了 flexbox，但它似乎不起作用。
-
DrunkenPoney 所以你在容器上使用了 display:flex 并在你想要拉伸的元素上使用了 flex:1？
标签： javascript jquery html css bootstrap-4