logo标签列表

CSS布局：带有滚动条的页眉、页脚和内容

htmlcsslayout
4
我需要一个Web应用程序的以下布局：
+---------------------------------------------+
|                   header                    |
+-------------------------------------------+-+
|                                           |#|
|                   content                 | |
|                                           |#|
+-------------------------------------------+-+
|                   footer                    |
+---------------------------------------------+
页眉/页脚
始终应在浏览器页面顶部/底部。它们没有固定的高度。 应填充可用空间，并可选择获取滚动条（由#指示）。滚动条不应覆盖整个窗口。 我需要在IE>=7、Chrome和Firefox中实现此功能。
到目前为止，我尝试了不同的div和表格，但它们都失败了，因为我无法使恰好填充可用空间。
更新：
和
的高度应由它们自己的内容确定（例如，页眉可能包括一个菜单，页脚可能设置了javascript通知）。
添加示例：
这应该展示我正在尝试做什么。问题是（除了不起作用:)），'outer' div的高度大于窗口。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
  <script src="../lib/jquery-1.4.2.min.js" type="text/javascript"></script>
  <style type="text/css">
    .header { width: 100%; background-color: red; }
    .footer { width: 100%; background-color: blue; }    
    .content { overflow: auto; height: 100%; }
  </style>
    <script type="text/javascript">

      $(function ()
      {
        $("#grow").click(function () { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); });
        $("#toggle").click(function () { $("#text").toggle(); });
      });

  </script>
</head>
<body style="height: 100%">
  <div id="outer" style="height: 100%">
    <div class="header">
      header <a id="grow" href="#">grow</a>
    </div>
    <div class="content">
      <h3>
        Lorem:</h3>
      <p>
        <a id="toggle" href="#">toggle</a>
      </p>
      <p id="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
        neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
        posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
        nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
        interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
        mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
        neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
        posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
        nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
        interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
        mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
        Vestibulum consequat vestibulum neque. Donec sagittis nisl sed sem dapibus accumsan. Praesent at ipsum enim. Nullam tellus
        sem, lobortis aliquet aliquet nec, volutpat vitae felis. Fusce dui leo, elementum sit amet varius sed, dictum non enim.
      </p>
    </div>
    <div class="footer">
      footer
    </div>
  </div>
</body>
</html>
1
那么，如果页眉和页脚没有固定的高度，它们的高度是多少？还有什么其他内容填充了“内容”空间？ - Nellius
已更新问题。'Content'由内容填充，例如文本、列表、Flash等。 - laktak
你必须做出选择，无法在高度不确定的情况下使用固定页脚... - Guillaume86
即使是 JS 布局库也使用固定高度，我认为你可以看一下 http://layout.jquery-dev.net/。 - Guillaume86
你应该在Photoshop中画出你想要的图片，否则别人无法帮助你。 - JohnB
4个回答
1

抱歉，我没有使用你的代码，但这是我认为你想要完成的基本概述。

   <!DOCTYPE html>
<head>
    <style type="text/css">
    html {
        min-height: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .wrap {
        width: 900px;
        margin: 0 auto 0;
        padding: 0;
    }
    .head {
        width: 900px;
        background: black;
        color: white;
        min-height: 20px;/* just for example */
        display: block;
        position: fixed;
        z-index: 1000;
        top: 0;
    }
    .content {
        width: 900px;
        background: gray;
        color: black;
        height: 100%;
        display: block;
        overflow-y: auto;
        margin: 20px 0 20px 0; /* top and bottom margins must be the height of your header/footer, respectively */
    }
    .footer {
        width: 900px;
        background: black;
        color: white;
        min-height: 20px;
        display: block;
        position: fixed;
        bottom: 0;
        z-index: 1000;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="head">
            <!-- your header content-->
            test
        </div>
        <div class="content">
            <!-- main content, scrollable -->
            test
        </div>
        <div class="footer">
            <!-- your footer content -->
            test
        </div>
    </div>
</body>
</html>

我觉得你似乎没有尝试使用粘性页脚，所以你可以使用position: fixed; bottom: 0来保持它的位置。

由于你正在为<div id="outer">设置高度/最小高度为100%，它的高度是从父元素中继承的，这就是为什么你会出现滚动条的原因。html，body {overflow: hidden}可以解决这个问题。

对于你的内容，添加overflow-y: auto

唯一棘手的部分是你必须有上下边距声明，这样你的头部和页脚就不会重叠。也许可以使用一些JavaScript来动态选择你的头部/页脚高度并将它们添加到你的内容边距中。

这样是否更接近了呢？

我想你不需要将你的页眉位置固定，这只是一个建议。 - davidg
0
尽管您想要特别设置高度，以便在所有浏览器中看起来相同，但据我所知，IE7不支持max-height。 - jimplode
仍然无法在IE8 / Chrome上工作。您使用的是哪个浏览器？ - laktak
你所要求的，若不使用 JavaScript 是不可能实现的。你并没有说明页脚必须在浏览器窗口底部！你可以通过 position:fixed; 来放置页脚，但要设置内容容器的高度，则需要使用 JavaScript 完成。你到底为什么要让页脚始终保持在底部呢？ - jimplode
@jimplode：哦，这不是真的！你绝对可以在没有JavaScript的情况下将页脚放在页面底部。有几种方法可以实现这一点（其中之一在我回答这个问题时进行了演示）。在网上搜索“CSS粘性页脚”。在我看来，使用CSS强制页脚到底部比JavaScript更好看；JS解决方案似乎有点卡顿。将页脚强制到底部是一个偏好问题。 - JohnB
我看到他们在这方面做了什么，但仍然不确定它是否适用于早期版本的IE。 - jimplode
显示剩余2条评论
0

我对你所寻找的东西感到困惑。你说你想要一个内容区域的滚动条，但是你知道浏览器在需要时会自动提供滚动条吗？

下面的HTML页面呈现了你所描述的布局（我想），但如果你因某种原因想要强制为.content部分添加滚动条，那么只需将这行额外的CSS代码添加进去即可：

.content { height : 300px; overflow-y:auto; }

在jsFiddle.net上查看我的代码运行情况

顺便说一下，我从你的HTML中删除了我认为不必要的代码，例如width:100;等。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
  <style type="text/css">
    html, body{ height:100%; }
    #outer{ /* footer stick to bottom */ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -1.5em; /* end footer stick to bottom */ }
    .header { background-color: red; }
    .footer, .push { height: 1.5em; }
    .footer {  position:relative; background-color: blue; text-align:center;}
  </style>
  <script type="text/javascript">
    $(function ()
    {
    $("#grow").click(function () { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); });
    $("#toggle").click(function () { $("#text").toggle(); });
    });
  </script>
</head>
<body>
  <div id="outer">
    <div class="header">
      header <a id="grow" href="#">grow</a>
    </div>
    <div class="content">
      <h3>Lorem:</h3>
      <p><a id="toggle" href="#">toggle</a></p>
      <p id="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
        neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
        posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
        nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
        interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
        mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
        neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
        posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
        nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
        interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
        mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
        Vestibulum consequat vestibulum neque. Donec sagittis nisl sed sem dapibus accumsan. Praesent at ipsum enim. Nullam tellus
        sem, lobortis aliquet aliquet nec, volutpat vitae felis. Fusce dui leo, elementum sit amet varius sed, dictum non enim.
      </p>
    </div>
    <div class="push"></div>
  </div>
  <div class="footer">footer</div>
</body>
</html
我不想将内容设置为固定高度 - 它应该随着窗口大小而增长。 - laktak
那么这个答案对你没有帮助吗？ - JohnB
0
最终我不得不使用JavaScript与resize事件结合起来：
<html>
<head>
  <script type="text/javascript" src="~/Scripts/jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
    $(function ()
    {
      var resize=function () { $(".dynamic-y").each(function (i, x) { $(x).height($(window).height()-$(".footer").outerHeight()-$(x).offset().top); }); };
      $(window).resize(resize);
      resize();
    });
  </script>
</head>
<body>
  <div class="header">
    ...
  </div>
  <div class="page dynamic-y">
    ...
  </div>
  <div class="footer">
    ...
  </div>
</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接