Question

我正在尝试创建一个页面，该页面将包含未知高度（或最小高度）的页眉和页脚div，如果内容增加则会滚动到中间内容，并且所有这三个应仅适合屏幕。

我尝试下面的工作，如果页眉和页脚的高度是固定的，如果只有中间内容增加，那么我完全滚动内容div。如何处理页眉和页脚的未知高度部分以使其适合？我给了最小高度，但没有工作。

#Pageheader {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: Blue;
}

#Pagefooter {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color:red;
}

#Pagecontent {
position: fixed;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
background-color: #EEEEEE;
overflow: auto;
}

和Html方面

<body>
<form id="form1" runat="server">
<div id="Pageheader">
</div>
<div id="Pagecontent">

</div>
<div id="Pagefooter">
</div>
</form>

Answer 1

ol'学校肮脏的方式是使用Jquery。检测页眉/页脚的高度，根据窗口高度和先前的高度放置内容div并调整其大小。

一个复杂的解决方案是使用Flexbox。使用align-content：stretch可以创建所需的布局。 您可以check it here.

Answer 2

上周我被困在尝试同样的事情上。我最终使用css表（与所有浏览器兼容，包括IE8）。这是它的CSS：

/ *布局-1 |页眉页脚* /

html {
  min-height: 100%;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  display: table;
}

header, footer {
  display: table-row;
  padding: 30px;
}

div#container {
  display: table-row;
  height: 100%;
}

如果你想要一个固定的页眉和页脚，并且滚动仅影响两者之间的主体部分，那么标记和css将完全不同，并使用position: absolute;

请告诉我这是否适合您：）

未知的页眉，页脚高度和滚动的中间内容？

2 个答案: