此元素适用于移动应用。
有一个工作正常的固定导航。
在页脚有一个固定的 div 和一些图标。 (工作正常)
我需要导航和页脚固定 div 之间的内容，以自动填充高度内容，无需滚动。
因此，当设备改变高度时，内容也会自动完成高度。
现在，如果我更改设备高度，它会在底部留下空白。
我已经尝试更改最小高度、最大高度、位置，但仍然没有成功。
我会尝试在这里展示一些代码，但这很难，因为我使用了很多库和很多 CSS，包括 boostrap。
但是你可以在这里测试这个元素: http://www.neevasoft.com/mobi/
这是菜单
<body data-open="click" data-menu="vertical-overlay-menu" data-col="2-columns" class="vertical-layout vertical-overlay-menu 2-columns menu-expanded fixed-navbar">
<!-- fixed-top-->
<nav class="header-navbar navbar-expand-md navbar navbar-with-menu fixed-top navbar-dark bg-primary navbar-shadow navbar-brand-center">
<div class="navbar-wrapper">
<div class="navbar-header">
<ul class="nav navbar-nav flex-row">
<li class="nav-item mobile-menu d-md-none mr-auto">
<a href="#" class="nav-link nav-menu-main menu-toggle hidden-xs">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a href="index.html" class="navbar-brand">
<h2 class="brand-text">
<span> Jorge<i class="fa fa-bell"></i></span>
</h2>
<div class="notify"> <span class="heartbit">
</span> <span class="point"></span> </div>
</a>
</li>
</ul>
</div>
<div class="navbar-container content">
<div id="navbar-mobile" class="collapse navbar-collapse">
<ul class="nav navbar-nav mr-auto float-left">
<li class="nav-item d-none d-md-block">
<a href="#" class="nav-link nav-menu-main menu-toggle hidden-xs">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- main menu-->
<div class="main-menu menu-fixed menu-light menu-accordion menu-shadow menu-border">
<div class="main-menu-content">
<ul id="main-menu-navigation" data-menu="menu-navigation" class="navigation navigation-main">
<li class=" nav-item open">
<a href="index.html">
<i class="fa fa-university" aria-hidden="true"></i>
<span data-i18n="" class="menu-title">Invista</span>
</a>
<ul class="menu-content">
<li>
<a href="index.html" class="menu-item">Home</a>
</li>
<li>
<a href="index.html" class="menu-item">Homebroker</a>
</li>
<li>
<a href="index.html" class="menu-item">Gráfico Avançado</a>
</li>
</ul>
</li>
<li class=" nav-item open">
<a href="#">
<i class="fa fa-pencil-square"></i>
<span data-i18n="" class="menu-title">Resumo</span>
</a>
<ul class="menu-content">
<li>
<a href="#" class="menu-item">Posição Consolidada</a>
</li>
<li>
<a href="#" class="menu-item">Posição Operacional</a>
</li>
<li>
<a href="#" class="menu-item">Vencimentos</a>
</li>
<li>
<a href="#" class="menu-item">Relatório de Performance</a>
</li>
<li>
<a href="" class="menu-item">Desenquadramentos</a>
</li>
</ul>
</li>
<li class=" nav-item open">
<a href="#">
<i class="fa fa-desktop"></i>
<span data-i18n="" class="menu-title">Ordem</span>
</a>
<ul class="menu-content">
<li>
<a href="#" class="menu-item">Ordens do dia</a>
</li>
<li>
<a href="#" class="menu-item">Negócios</a>
</li>
<li>
<a href="#" class="menu-item">Calls</a>
</li>
</ul>
</li>
<li class=" nav-item open">
<a href="#">
<i class="fa fa-clone"></i>
<span data-i18n="" class="menu-title">Posição</span>
</a>
<ul class="menu-content">
<li>
<a href="#" class="menu-item">Bovespa</a>
</li>
<li>
<a href="#" class="menu-item">Títulos Públicos</a>
</li>
<li>
<a href="#" class="menu-item">BM&F</a>
</li>
<li>
<a href="#" class="menu-item">Garantias</a>
</li>
<li>
<a href="#" class="menu-item">Proventos</a>
</li>
<li>
<a href="#" class="menu-item">Renda Fixa</a>
</li>
<li>
<a href="#" class="menu-item">Clubes e Fundos</a>
</li>
</ul>
</li>
<li class=" nav-item open">
<a href="#">
<i class="fa fa-file-text-o"></i>
<span data-i18n="" class="menu-title">Nota de Corretagem</span>
</a>
<ul class="menu-content">
<li>
<a href="#" class="menu-item">Bovespa</a>
</li>
<li>
<a href="#" class="menu-item">BM&F</a>
</li>
</ul>
</li>
<li class=" nav-item open">
<a href="#">
<i class="fa fa-money"></i>
<span data-i18n="" class="menu-title">Saldo Extrato</span>
</a>
<ul class="menu-content">
<li>
<a href="#" class="menu-item">Saldos e Projeções</a>
</li>
<li>
<a href="#" class="menu-item">Extratos de C/C</a>
</li>
</ul>
</li>
<li class=" nav-item open">
<a href="#">
<i class="fa fa-user"></i>
<span data-i18n="" class="menu-title">Clientes</span>
</a>
<ul class="menu-content">
<li>
<a href="#" class="menu-item">Dados Cadastrais</a>
</li>
<li>
<a href="#" class="menu-item">Perfil do Investidor</a>
</li>
<li>
<a href="#" class="menu-item">Informe de Rendimentos</a>
</li>
<li>
<a href="#" class="menu-item">Rendimentos Tesouro Direto</a>
</li>
<li>
<a href="#" class="menu-item">Termo de adesão</a>
</li>
<li>
<a href="#" class="menu-item">Limite para Operar BM&F</a>
</li>
<li>
<a href="#" class="menu-item">Monitoramento de Prejuizo BM&F</a>
</li>
</ul>
</li>
<li class=" nav-item">
<a href="#">
<i class="fa fa-comment"></i>
<span data-i18n="" class="menu-title">Atendimento Online</span>
</a>
</li>
<li class=" nav-item">
<a href="#">
<i class="fa fa-sign-out"></i>
<span data-i18n="" class="menu-title">Sair</span>
</a>
</li>
</ul>
</div>
</div>
这是主页(在导航和页脚 div 之间)
<!-- Main Content-->
<div class="app-content content">
<div class="content-wrapper">
<div class="content-body">
<div class="row match-height">
<div class="col-xl-12 col-lg-12">
<div class="card">
<div class="card-content collapse show">
<div class="card-body">
<canvas id="column-multi-axis" height="200"></canvas>
</div>
</div>
<div id="goal-list-scroll" class="table-responsive position-relative">
<table class="table mb-0">
<tbody>
<tr>
<td>
<font color="#007aba">Ações</font>
</td>
<td>
<font color="#007aba">$0.18</font>
</td>
</tr>
<tr>
<td>
<font color="#b8b828">Opções</font>
</td>
<td>
<font color="#b8b828">$0.12</font>
</td>
</tr>
<tr>
<td>
<font color="#aa2524">Termo</font>
</td>
<td>
<font color="#aa2524">$220</font>
</td>
</tr>
<tr>
<td>
<font color="#00b1b1">BM&F</font>
</td>
<td>
<font color="#00b1b1">$880</font>
</td>
</tr>
<tr>
<td>
<font color="#c75fc7">Garantias</font>
</td>
<td>
<font color="#c75fc7">$1002</font>
</td>
</tr>
<tr>
<td>
<font color="#1fc11e">Tesouro Direto</font>
</td>
<td>
<font color="#1fc11e">$1200</font>
</td>
</tr>
<tr>
<td>
<font color="#b44013">Financeiro</font>
</td>
<td>
<font color="#b44013">$1200</font>
</td>
</tr>
<tr>
<td>
<font color="#461577">BTC</font>
</td>
<td>
<font color="#461577">$1200</font>
</td>
</tr>
<tr>
<td>
<font color="#762100">Renda Fixa</font>
</td>
<td>
<font color="#762100">$1200</font>
</td>
</tr>
<tr>
<td>
<font color="#5599ff">Clubes e Fundos</font>
</td>
<td>
<font color="#5599ff">$1200</font>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
还有页脚div
<div class="fixed-bottom">
<div class="container">
<div class="row2">
<div class="col-4">
<span class="float-md-left d-block d-md-inline-block">
<a href="#">
<img src="images/invista.png">
Invista
</span>
</div>
<div class="col-4">
<span class="float-md-right d-block d-md-inline-blockd-none d-lg-block">
<a href="#"><span class="fa fa-pencil-square2"></span>
Resumo
</span>
</div>
<div class="col-4">
<span class="float-md-right d-block d-md-inline-blockd-none d-lg-block">
<a href="#"><i class="fa fa-desktop2"></i>
Ordem
</span>
</div>
</div>
</div>
</div>
我认为相关的 css:
html body .content.app-content {
overflow: hidden;
max-height: 89%;
}
html body .content.app-content {
overflow: hidden;
}
.vertical-overlay-menu .content {
margin-right: 0;
}
html body .content {
padding: 0;
position: relative;
-webkit-transition: 300ms ease all;
-o-transition: 300ms ease all;
-moz-transition: 300ms ease all;
transition: 300ms ease all;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
*, ::before, ::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html body .content .content-wrapper {
padding: 0rem !important;
max-height: 89%;
}
.content-body {
max-height: 89%;
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.card {
margin-bottom: 1.875rem;
border: none;
border-radius: 0;
-webkit-box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
}
.card {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #FFFFFF;
-webkit-background-clip: border-box;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 0.25rem;
}
最佳答案
try set
contentto
min-height:calc(100%);
或者你可以使用像
这样的视口(viewport)高度 min-height:<value>vh;
关于html - 在主页上自动更改高度，无需滚动，具有固定的导航和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48686231/