Question

我正在尝试撰写图片中显示的布局。我希望布局覆盖整个浏览器区域。

我的问题是无法将内容固定到页脚。即使浏览器调整大小，内容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;
}

Answer 1

他是我昨晚制作的东西，它将页脚固定在底部，根据其中的内容，你的身体区域仍然是动态的

function main() {
    var $window = $(window).outerHeight(true);
    var $footer = $('.footer').outerHeight(true);
    var $header = $('.header').outerHeight(true);
    var $total = $window - ($header + $footer);

    // .main is the content area
    $(".main").css({
        "min-height": $total + 'px'
         // "min-height": 100 - ($total/100) + 'vh'
    });
}

$(document).ready(function() {
    main();
});

$(window).resize(function() {
    main();
});

要记住的一点是，将px转换为vh并不会在运行中发生，而不是在css或js中发生

Answer 2

如果我读得正确，这就是你所追求的。 flexbox（与calc结合使用）对于实现这些布局非常有用。请参阅下面的代码。

body, html {
  height: 100vh;
  margin: 0;
}

.container {
  height: 100%;
}

.top-bar, .foot-bar {
  height: 50px;
}

.main-content {
  height: calc(100% - 100px);
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.side-bar, .main-bar {
  height: 100%;
}

.side-bar {
  width: 100px;
}

.main-bar {
  overflow-y: scroll;
  font-size: 20px;
  width: calc(100% - 100px);
}

.top-bar {
  background: green;
}

.side-bar {
  background: red;
}

.main-bar {
  background: darkred;
}

.foot-bar {
  background: limegreen;
}

<div class="container">

  <div class="top-bar"></div>

  <div class="main-content">
  
    <div class="side-bar"></div>    
    <div class="main-bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero deserunt repellat asperiores optio esse et voluptas ad, autem possimus beatae labore nam natus, tempora expedita. Voluptatum optio architecto aut quas culpa magni, quis, sapiente tenetur quisquam nobis. Aliquam, nesciunt. Explicabo numquam ipsa saepe cupiditate temporibus amet ratione velit, repellat quaerat, tempore expedita eius sit aliquid neque impedit quia soluta repellendus architecto nihil ducimus, quas odio inventore consectetur nostrum. Enim eum voluptate veritatis hic quia nemo maiores a accusantium explicabo labore aliquid iusto autem iure sed blanditiis debitis dicta porro, dolore vero ut natus, obcaecati molestiae! Animi reiciendis dolorum officiis nostrum deserunt eaque nihil impedit natus placeat iusto aspernatur quae velit rem asperiores fugiat rerum, nobis pariatur. Recusandae itaque rem repudiandae placeat eum, delectus, facilis, provident, praesentium adipisci aut sed. Numquam dolorem ad, alias molestias illum iure. Obcaecati nam harum iure recusandae, voluptatem. Totam officia sit dolorem! Aliquam quod blanditiis, architecto placeat officia maxime, nam aliquid commodi nemo fugit fugiat, quis modi reprehenderit mollitia ducimus iusto! Illum cumque a aliquam, odit officia delectus iusto hic eligendi maiores laborum soluta fugiat nihil itaque quo iste quasi rem numquam. Tenetur asperiores odit dignissimos aliquam error, aliquid illum magnam eius libero. Vel, quae sint?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus mollitia sapiente distinctio consequatur ab laboriosam corporis dignissimos facilis voluptatum odio, amet praesentium quisquam expedita nisi doloribus sunt! Voluptatum, aperiam, quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe facere aliquid fuga pariatur praesentium corporis recusandae, incidunt a cupiditate sint eum omnis adipisci rerum non! Accusantium quaerat ipsum, pariatur quae molestiae, culpa laborum! Obcaecati, laudantium provident aliquid asperiores repellat, distinctio quisquam earum, dolores quasi rerum facilis quaerat, minus aspernatur sapiente rem ipsum id. Temporibus eligendi, itaque quae aliquam, deserunt at veritatis sequi, ab cum molestias praesentium alias. Minima inventore, expedita quasi doloremque quod quis nostrum vero ullam velit. Voluptate totam magni ipsum corrupti, nobis, eveniet nesciunt veniam ipsa aut non nemo cumque dicta harum placeat mollitia. Aut libero reiciendis consequuntur.</div>

  </div>
  
  <div class="foot-bar"></div>
  
</div>

内容区域的CSS高度

2 个答案: