具有固定HTML页眉和页脚的页面布局，具有灵活的内容_Html_Css

具有固定HTML页眉和页脚的页面布局，具有灵活的内容

html css

具有固定HTML页眉和页脚的页面布局，具有灵活的内容,html,css,Html,Css,我有一个固定页眉和页脚的网页（HTML+CSS）我希望页眉和页脚之间有一个内容div，在调整浏览器窗口（文档）的大小时，该div是“灵活”的如果Content div太小，无法显示其内容，则Content div必须显示水平和垂直滚动条，而不是浏览器窗口。如果Content div太大，无法显示其内容，则Content div不能显示水平和垂直滚动条，而不能显示浏览器窗口简而言之，Content div必须在页眉和页脚之间自动处理浏览器的大小调整我当前的代码可能只需要在CSS中进行一些

我有一个固定页眉和页脚的网页（HTML+CSS）

我希望页眉和页脚之间有一个内容div，在调整浏览器窗口（文档）的大小时，该div是“灵活”的

如果Content div太小，无法显示其内容，则Content div必须显示水平和垂直滚动条，而不是浏览器窗口。如果Content div太大，无法显示其内容，则Content div不能显示水平和垂直滚动条，而不能显示浏览器窗口

简而言之，Content div必须在页眉和页脚之间自动处理浏览器的大小调整

我当前的代码可能只需要在CSS中进行一些调整就可以做到这一点

我目前硬编码Content div的高度以强制滚动条（100px），但这应该可以自动工作

我是否应该考虑使用JavaScript来实现这一点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style>

    #header, #footer {
        position:fixed;
        left:0;
        width:100%;
        z-index:200;
        height:100px;
        background-color:brown;

        border-style:solid;
        border-width:1;                

    }

    #header {
        top:0;
    }

    #footer {
        bottom:0;
    }
    #main-content {

        overflow:scroll;

        height:100px; 

        width:960px;
        margin:0 auto;
        padding:130px 0;  

        border-style:dashed;
        border-width:1;                                  
    }

    #navigation, #paging {
        width:960px;
        margin:0 auto;
    }

</style>


    <title>Untitled Page</title>
</head>
<body >

<div id="header">
    <div id="navigation">Navigation goes here</div>
</div>

<div id="main-content" > Section content goes here
Section content goes here<br>
Section content goes here<br>
Section content goes here<br>
Section content goes here<br>
Section content goes here<br>
Section content goes here<br>
Section content goes here<br>
Section content goes here<br>
Section content goes here<br>

Section content goes here<br>
Section content goes here<br>
Section content goes here<br>
Section content goes here<br>
Section content goes here<br>

</div>

<div id="footer">
    <div id="paging">Paging controls go here</div>
</div>


</body>
</html>


#页眉，#页脚{
位置：固定；
左：0；
宽度：100%；
z指数：200；
高度：100px；
背景颜色：棕色；
边框样式：实心；
边界宽度：1；
}
#标题{
排名：0；
}
#页脚{
底部：0；
}
#主要内容{
溢出：滚动；
高度：100px；
宽度：960px；
保证金：0自动；
填充：130px0；
边框样式：虚线；
边界宽度：1；
}
#导航，#寻呼{
宽度：960px；
保证金：0自动；
}
无标题页
导航到这里
部分内容在这里
章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

章节内容在此处

分页控件在这里

下面是一个示例，如果您感兴趣，可以使用jQuery提供一些帮助，


（函数（$）{
$（#main content'）.css（{height:$（window.innerHeight（）-200+'px'}）；
$（窗口）。调整大小（函数（）{
$（#main content'）.css（{height:$（window.innerHeight（）-200+'px'}）；
});
})（jQuery）；

#main-content {
  width: 960px;
  margin: 100px auto;
  padding: 0;
  overflow: auto;
  border: 1px dashed;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<script>
  (function($) {
     $('#main-content').css({ height: $(window).innerHeight() - 200 + 'px' });
     $(window).resize(function() {
       $('#main-content').css({ height: $(window).innerHeight() - 200 + 'px' });
     });
  })(jQuery);
</script>