Question

我需要以下webapp布局：

+---------------------------------------------+
|                   header                    |
+-------------------------------------------+-+
|                                           |#|
|                   content                 | |
|                                           |#|
+-------------------------------------------+-+
|                   footer                    |
+---------------------------------------------+

页眉/页脚应始终位于浏览器页面的顶部/底部。它们没有固定的高度。

内容应填充可用空间，并可选择获取滚动条（以＃表示）。滚动条不应覆盖整个窗口。

我需要在IE＆gt; = 7，Chrome和Firefox中使用它。

到目前为止，我尝试了不同的div和表，但它们都失败了，因为我无法获得内容来准确填充可用空间。

更新：标题和页脚的高度应由其自己的内容决定（例如标题可能包含菜单，页脚通过javascript设置的通知）。

添加样本：

这应该显示我想要做的事情。问题是（除了不工作:)）是'外部'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>

Answer 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动态选择你的页眉/页脚高度，并将它们添加到你的内容边缘。

这越来越近了吗？

Answer 2

http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/

只需更改

即可

#content {
  background: #fff;
  position: absolute;
  top: 100px;
  left: 150px;
  width: 700px;
  height: 500px;
}

身高：自动;

max-height：无论你想要什么

溢出 - X：隐藏;

溢出-γ：汽车;

Answer 3

我对你要找的东西很困惑。您说您想要内容部分的滚动条，但是您知道浏览器会在需要时自动提供滚动条吗？

下面的HTML页面呈现您正在描述的布局（我认为），但是如果您想出于某种原因强制滚动条到.content部分，那么只需添加额外的线到CSS：

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

<强> See my code run on jsFiddle.net

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

CODE：

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

Answer 4

最后我不得不将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>

带滚动条的页眉，页脚和内容的CSS布局

4 个答案: