我希望我的表（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用窗口调整大小
答案 0 :(得分：1)
由于预览无法正确显示，您必须全屏或在编辑器中查看。但这应该解决你的问题。
我切断了所有多余的代码，以便更容易看到发生了什么。
这里有一个很棒的flexbox指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
它的基础 display：flex; 这定义了一个flex容器;它为所有直接孩子提供了灵活的上下文。
flex-direction 行已经是显示从左到右项目的默认设置。
flex-wrap 默认情况下，flex项目都会尝试适合一行。所以这被设置为 wrap。
通过将宽度定义为28％或任何小于三分之一且超过总宽度的四分之一减去边距的分割，将Flexbox .flexbox项目中的项目间隔开来26-33％将使flexbox显示三行。
justify-content 这定义了沿主轴的对齐方式。
align-items 这定义了如何沿当前行的横轴布置弹性项目的默认行为。
align-content 这会在
中对齐flex容器的行flex-start（默认值）：项目朝着起始行打包
flex-end：项目被打包到终点
center：项目沿着这条线居中
space-between：项目均匀分布在该行中;第一项是 在起始行，结束行的最后一项
space-around：项目均匀分布在行中 他们周围的空间。请注意，在视觉上空间不相等，因为 所有物品两侧都有相同的空间。第一项将有 一个单位的空间抵靠容器边缘，但两个单位的空间 在下一个项目之间，因为下一个项目有自己的间距 适用。
引用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>
答案 1 :(得分：0)
我决定挑战自己，看看我是否可以远距离使用与我的小提琴风格相同的代码制作日期选择器。虽然在我进入太多细节之前我会把它留在这里哈哈。
当你只需输入......时，这是一种毫无意义的练习。
<input type="date">
... HTML5将为您构建一个日期选择器。哪个可以设置风格。
此处有关于此的更多信息：http://diveintohtml5.info/forms.html#type-date
玩它仍然很有趣。
$(document).ready(() => {
$('.flexbox.day').hide();
$('dates.date').hide();
$("switchButton").click(function() {
$('.flexbox.day').slideToggle();
$('.flexbox.month').slideToggle();
$('dates.date').slideToggle();
});
});@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=greek,latin-ext');
main {
display: flex;
align-items: center;
padding: 0.5%;
background: rgba(132, 141, 148, 0.82);
font-size: 2.5vmax;
transition: all 0.5s ease;
}
header i {
display: flex;
padding: 0.5%;
margin: auto;
font-size: 2vmax;
}
input {
text-align: center;
}
header a {
margin: auto;
font-size: 3vmax;
width: 30%;
color: #fff;
}
.nav {
background: rgba(160, 61, 78, 0.13);
color: #fff;
text-align: center;
}
.flexbox {
display: flex;
justify-content: space-around;
text-align: center;
height: auto;
padding: 0%;
flex-wrap: wrap;
font-weight: bold;
flex-basis: 0;
text-transform: uppercase;
}
.flexbox item {
width: 27%;
padding: 0.5% 1%;
background: rgba(206, 206, 206, 0.8);
margin: 0.1% 0.1%;
align-self: center;
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);
}
.flexbox day {
width: 14%;
padding: 0.5%;
background: rgba(233, 255, 255, 0.9);
margin: 0.1% 0.1%;
align-self: center;
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);
}
dates {
display: flex;
justify-content: flex-start;
text-align: center;
height: auto;
padding: 0%;
flex-wrap: wrap;
font-weight: bold;
flex-basis: 0;
text-transform: uppercase;
}
dates date {
line-height:1;
width: 14%;
padding: 0.5%;
background: rgba(206, 206, 206, 0.8);
margin: 0.1% 0.14511999%;
align-self: flex-start;
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);
}
.footer {
background-color: rgba(78, 61, 78, 0.13);
padding: 0.5%;
display: flex;
flex-basis: 0;
justify-content: space-around;
text-align: center;
}
.footer item {
padding: 0.5% 1%;
background: #eee;
border-radius: 5%;
width: 27%;
font-weight: bold;
margin: 0.3% 0;
font-size: 2.5vmax;
align-self: space-between;
}
.footer item:hover {
-webkit-appearance: button;
cursor: pointer;
background: rgba(174, 236, 255, 0.8);
}
.flexbox item:hover,
.flexbox day:hover,
dates date:hover {
-webkit-appearance: button;
cursor: pointer;
background: rgba(174, 236, 255, 0.8);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<body>
<main class="main">
<header class="nav">
<a href="#"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<a href="#"><input type="number" min="1900" max="2100" step="1" value="2017"></a> <a href="#"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</header>
<div class="flexbox month">
<item>Jan</item>
<item>Feb</item>
<item>Mar</item>
<item>Apr</item>
<item>May</item>
<item>June</item>
<item>July</item>
<item>Aug</item>
<item>Sep</item>
<item>Oct</item>
<item>Nov</item>
<item>Dec</item>
</div>
<div class="flexbox day">
<day>Mon</day>
<day>Tue</day>
<day>Wed</day>
<day>Thu</day>
<day>Fri</day>
<day>Sat</day>
<day>Sun</day>
</div>
<dates class="date">
<date>1</date>
<date>2</date>
<date>3</date>
<date>4</date>
<date>5</date>
<date>6</date>
<date>7</date>
<date>8</date>
<date>9</date>
<date>10</date>
<date>11</date>
<date>12</date>
<date>13</date>
<date>14</date>
<date>15</date>
<date>16</date>
<date>17</date>
<date>18</date>
<date>19</date>
<date>20</date>
<date>21</date>
<date>22</date>
<date>23</date>
<date>24</date>
<date>25</date>
<date>26</date>
<date>27</date>
<date>28</date>
<date>29</date>
<date>30</date>
<date>31</date>
</dates>
<div class="flexbox day">
<day>Mon</day>
<day>Tue</day>
<day>Wed</day>
<day>Thu</day>
<day>Fri</day>
<day>Sat</day>
<day>Sun</day>
</div>
<div class="footer">
<item>
<switchButton>Days/Months</switchButton>
</item>
<item>Clear</item>
<item>Close</item>
</div>
</main>
</body>