Question

我有一个网页（HTML + CSS），页眉和页脚已修复。

我希望页眉和页脚之间的Content-div是＆＃34;灵活的＆＃34;当浏览器窗口（文档）调整大小时。

如果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>

Answer 1

如果您对此感兴趣，请参阅jQuery的一些示例 FIDDLE

#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>

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

1 个答案: