1
我试图组合显示在图片上的布局。我希望布局覆盖整个浏览器区域。内容区域的CSS高度
我的问题是无法将内容固定到页脚。即使在浏览器调整大小的情况下，内容div也会自动进行动态调整。
在内容DIV类有其高度100vh，但它超出和窗口滚动条出现。
然后我用calc(100vh-100px)其中100px是总和（headerHeight + footerHeight），但没有成功。
无论如何不用jQuery来完成这个任务吗？
编辑：
HTML：
<div ng-app="app" layout="column" layout-fill ng-cloak>
<header>
<div class="main_header" ng-controller="headerCtrl as ctrl">
<img src="/img/Logo.png" width="300" height="60" alt="Logo" />
<div style="min-width:200px;width:60%" ng-controller="autocompleteCtrl">
<md-autocomplete class="search_box"
md-selected-item="selectedItem"
md-search-text="searchText"
md-items="item in querySearch(searchText)"
md-search-text-change="querySearch(searchText)"
md-item-text="item.value"
md-min-length="2"
md-autofocus="true"
md-no-cache="false"
placeholder="Search...." my-enter>
<md-item-template>
<span>{{item.value}}</span>
</md-item-template>
<md-not-found>
No matches found.
</md-not-found>
</md-autocomplete>
</div>
<div class="main_header_buttons_container">
<md-button class="md-raised md-primary" ng-click="showLoginPopup($event)" ng-show="!isSessionActive">Log in</md-button>
<md-button class="md-raised md-primary" ng-click="showRegisterPopup($event)" ng-show="!isSessionActive">Register</md-button>
<md-button class="md-raised md-primary" ng-click="closeSession($event)" ng-show="isSessionActive">Close Session</md-button>
</div>
</div>
</header>
<div class="main_body" layout="row">
<div ng-controller="sidebarCtrl">
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="true">
<div layout="column" layout-align="start end" style="margin-top:50px">
<md-icon md-svg-src="/img/magnifying-glass-browser.svg" class="icon_search <?php echo $sidebar_option=='1'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='1'?'':'change_menu(1)'; ?>"></md-icon>
<md-icon md-svg-src="/img/favorites_icon.svg" class="icon_favorites <?php echo $sidebar_option=='2'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='2'?'':'change_menu(2)'; ?>"></md-icon>
<md-icon md-svg-src="/img/historical_icon.svg" class="icon_favorites <?php echo $sidebar_option=='3'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='3'?'':'change_menu(3)'; ?>"></md-icon>
<md-icon md-svg-src="/img/collections_icon.svg" class="icon_favorites <?php echo $sidebar_option=='4'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='4'?'':'change_menu(4)'; ?>"></md-icon>
</div>
</md-sidenav>
</div>
<md-content flex layout-padding class="remove-padding-around">
<div class="collections_content_area" layout="column" layout-fill layout-align="top left">
The content (blue area)
</div>
</md-content>
</div>
<footer>
<div layout="row" layout-align="center center">
<h4>My Awesome Footer</h4>
</div>
</footer>
CSS：
.main_header {
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #F2F2F2;
}
.main_header_buttons_container {
width: 20%;
min-width: 250px;
text-align: center;
}
.main_body {
background-color: #CCC;
}
.collections_content_area {
height:98vh;
background-color: #ebeef0;
min-height:450px;
}
@Paulie_D我只是问了一个建议，而不是代码。我将发布代码。 – Apalabrados
你可以使用[flex]轻松实现这个功能（https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/）..不需要jquery ..纯html，css – Anirudha
@Anirudha I在内容区Div中放置flex并且不做任何事情。 – Apalabrados