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