Question

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

我的底部有静态导航栏和固定页脚。我希望div.main有＆＃34;高度为剩余的剩余空间的100％＆＃34;。当我的内容没有采取所有剩余的高度时，它不起作用。

以网页示例： http://test.vincentbourganel.fr/page/contact/

你能帮我解决这个问题吗？

Answer 1

不确定您对此解决方案的看法，我不仅仅是前端开发人员，而是您可以做的事情

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

我唯一不喜欢这个解决方案的是，如果不对其中的高度进行硬编码，我就无法想到这样做的方法。我确信有一种方法可以抓住它但是现在这应该让你朝着正确的方向前进。

Answer 2

您可以使用flex获取该内容，我创建了一个box类并将flex指定为属性，然后使用flex:1 0 0内容部分，我使用{{ 1}} to footer to stay in bottam，并将position分配给内容部分div。

下面我发布了一个理解

的工作示例

Flex - Flex Guide

<强> Working Fiddle

overflow:auto

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;
}

Answer 3

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

import sqlite3 def update(id,title,author,year,isbn): conn=sqlite3.connect("books.db") cur=conn.cursor() cur.execute("UPDATE book SET title=?,author=?,year=?,isbn=? WHERE id=?",(title,author,year,isbn,id)) conn.commit() conn.close()

Answer 4

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

此代码可以正常工作以满足我的需求：

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/

如何在我的div.main类

4 个答案: