javascript - CSS Fit div Height 自动适应两个div之间的可用空间-6ren

javascript - CSS Fit div Height 自动适应两个div之间的可用空间

转载作者：行者123 更新时间：2023-11-28 15:30:58

我希望我的表格(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>&lt; Prev / Next &gt;</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/

文章推荐： javascript - MS CRM2013 JavaScript选项问题

文章推荐： javascript - 附加 defs 标签并在 D3.js 的 SVG 中使用它

文章推荐： ios - 是否可以为不同的 iPhone 屏幕设置宽度和高度？

Tomcat 用完了 PermGen 空间，即使保留了很多 PermGen 空间
运行 Tomcat 失败并出现 java.lang.OutOfMemoryError - 与缺少 PermGen 空间相关的错误。我最近将 Tomcat 更改为以自己的用户(而非 root)运行。
空间+时间参数的Postgresql复合索引
我们有一个表，其中包含数百万行，其中包含 PostGIS 几何图形。我们要执行的查询是:落在边界几何内的最新条目是什么？这个查询的问题是我们经常会有大量的项目匹配边界框(半径大约为 5 公里)，然后
php - Elasticsearch 空间
我有一个Elasticsearch设置，它将允许用户搜索通配符作为索引。 array:3 [ "index" => "users" "type" => "user" "body" => arra
表格中按钮之间的 HTML 空间
我创建了一个表，其中每行包含两个按钮，并且两个按钮连接在一起，我想将两个按钮分开。我用过不起作用，css 也是，这是他们的另一种方式。我有另一个问题，因为我不想在表格边框内显示操作按钮，而是在靠近
按钮之间的 CSS 空间
我试图在 jQuery Mobile 中的两个按钮之间留出空白。现实中的布局是这样的: Button 1 Button 2 (Hidden w/ display: none)
函数后的 JavaScript 空间
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
android - 如何使用图表引擎减少条形图和图表图例之间的间隙/空间？
您好，我对图表应用程序还很陌生。现在我为我的应用程序创建了条形图。当我运行 create bar chart as separate project 时，输出如下所示。然后当我将条形图与我的应用程序
hibernate 空间 : can't find function
我在使用 H2 和 GeoDB(内存中，junit)时遇到问题。另外，使用 Hibernate 5(每个包的最新版本，包括 hibernate-spatial)和 Spring 4。通过 id 实
r - 映射澳大利亚城市 - R 空间
我想画一张澳大利亚的 map ，并将每个城市表示为一个点。然后突出显示人口众多(> 1M)的城市 library(sp) library(maps) data(canada.cities) head
Cassandra:备份整个 key 空间
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 提供事实和引用来回答它. 6年前关闭。 Improve this
delphi - Memo1.Loadfromfile()空间
如何保持.txt文件中存在的空格？在.txt文件中，它表示： text :text text1 :text1 text23 :text2 text345 :text3 如果我写这段
passwords - 如何计算密码的 key 空间？
以下哪个键最大？选项 1:16 个数字 [0,9] 选项 2:30 个元音选项 3:字母表中的 16 个字母选项 4:32 位有人可以帮助我，告诉我哪一个是正确的答案以及我们如何计算它吗？我知
android - Azure 空间 anchor
在 Unity 3d 中使用 Azure 空间 anchor 来实现在 iOS 和 Android 上部署的室内和室外增强现实体验是否有益？最佳答案是的，对于 Azure Spatial Anch
javascript - 调整大小的图像占用太多 UI 空间
我有一个绝对定位的圆形图像。图像只需占据屏幕宽度的 17%，并且距离顶部 5 个像素。问题是，当我调整图像大小以占据屏幕宽度的 17% 时，它会这样做，但同时容器会变长。图像本身不会拉伸(stret
cassandra - 使用nodetool备份cassandra key 空间
我在 Ubuntu 14.04 上使用 Cassandra。从文档中，我可以看到运行命令: nodetool snapshot 创建我的 key 空间的快照。命令的输出是: nodetool sn
Heroku 将应用程序迁移到私有(private)空间
Heroku引入了“私有(private)空间”，是否可以将现有应用迁移到私有(private)空间？ https://blog.heroku.com/archives/2015/9/10/herok
mediawiki - 在语义记录中设置非绑定(bind)空间
是否允许在语义记录中使用非绑定(bind)空格或其他 HTML 编码字符？我遇到的问题是 ; 字符被软件视为记录的结尾。例如:假设我有一份婚姻记录，其中包含 2 个结婚者的姓氏、结婚年份以及结
python - 自动泊车位检测-如何使用OpenCV和Python初始化泊车位图/空间
我正在研究“智能 parking ”项目，偶然发现了包含我们真正需要的YouTube视频。我们已经实现了第一部分，即从视频源进行实时透视变换，下一步是将其定义为一组矩形我基本上需要知道他是如何做到的
java - 如何为两个类创建共享 ID 空间？
我有两个类:Engine 和 Trainset(多个单元)，这两个类共享其 ID 空间，其中包含名称和系列 id=- . 这是我的Engine类(它是抽象的，因为有引擎的子类型(DieselEngin
java - 分割字符串 Java 空间
如果有人能帮助我，那就太好了。我正在尝试使用Java的Split命令，使用空格分割字符串，但问题是，字符串可能没有空格，这意味着它将只是一个简单的顺序(而不是“输入2”将是“退出”) Scanner

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - CSS Fit div Height 自动适应两个div之间的可用空间

对齐方式: