Css 未知的页眉、页脚高度和带有滚动条的中间内容？_Css_Responsive Design_Footer

Css 未知的页眉、页脚高度和带有滚动条的中间内容？

css responsive-design

Css 未知的页眉、页脚高度和带有滚动条的中间内容？,css,responsive-design,footer,Css,Responsive Design,Footer,我正在尝试创建一个页面，它将有页眉和页脚div，高度未知（或最小高度），如果内容增加，中间内容将有滚动，并且所有这三个应该只适合屏幕我在下面尝试过，如果页眉和页脚的高度是固定的，并且只有中间内容增加，那么我就可以完美地获得内容div的滚动。如何处理页眉和页脚的未知高度部分以使其适合？我给出了最小高度，但不起作用 #Pageheader { position: fixed; top: 0; left: 0; right: 0; height: 100px; background-color: B

我正在尝试创建一个页面，它将有页眉和页脚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>

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

一个复杂的解决方案是使用Flexbox。使用“对齐内容：拉伸”可以创建所需的布局你可以

我上个星期在尝试同样的事情时遇到了麻烦。最后我用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
让我知道这是否对您有效：）