0

在我的网站上（使用 zenphoto 和 boostrap 3），我的 div.main 课程有问题。 http://test.vincentbourganel.fr

我有静态导航栏和底部的固定页脚。我希望 div.main 具有“其余部分的 100% 的高度”。当我的内容没有占用所有剩余高度时，它不起作用。

请参阅此页面作为示例： http ://test.vincentbourganel.fr/page/contact/

你能帮我解决这个问题吗

4

4 回答 4

1

您可以通过使用来获取它flex，我创建了一个box类并分配flex为属性，然后使用flex:1 0 0到内容部分，我曾经position将页脚留在底部，并分配overflow:auto给内容部分 div。

下面我发布了一个工作示例来理解

弹性 -弹性指南

工作小提琴

body {
  margin: 0px;
  padding: 0px;
}

.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.header {
  background: tomato;
}

.content {
  flex: 1 0 0;
  background: green;
  overflow: auto;
}

.footer {
  background: blue;
  position: relative;
}
<div class="box">
  <div class="header">
    Header
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam
    mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam
    alias dicta, excepturi quod sed delectus veniam?<br><br>
  </div>
  <div class="footer">
    Footer
  </div>
</div>

于 2017-06-23T16:13:52.243 回答
1

不确定你对这个解决方案的感受，我更像是一个后端开发人员而不是前端人员，但你总是可以做类似的事情

calc(100vh - (HEIGHT_OF_HEADER + BORDER) - (HEIGHT_OF_FOOTER + BORDER)

我不喜欢这个解决方案的唯一一点是，如果不对其中的高度进行硬编码，我想不出一种方法来做到这一点。我敢肯定有办法抓住它，但现在这应该让你朝着正确的方向前进。

于 2017-06-23T15:40:07.050 回答
0

我找到了一种在我的 js 文件中做我想做的事情的方法。我的 JS 代码修复了我的主 div 的最小高度以填充屏幕，即使主要内容很小。

这段代码可以很好地满足我的需要：

jQuery(document).ready(function() { // full height for main div (windows height - "header" height - "footer" height) $(window).resize(function() { $('#main').css('min-height', $(window).height() - $('#menu').outerHeight() - $('#footer').outerHeight()); }).resize(); });

你可以在那里看到它：http: //test.vincentbourganel.fr/

于 2017-06-26T15:27:16.810 回答
0

您可以使用以下代码调整主 div 的高度。如果内容较少，它将全屏显示。

.main{ min-height: 100vh; }

于 2017-06-23T16:13:59.300 回答