【问题标题】:How to get a div to stretch right down to a fixed footer如何让 div 一直延伸到固定的页脚
【发布时间】:2013-05-12 00:40:16
【问题描述】:

我希望我的设计的两个部分(见附图)能够扩展页面的整个高度。我试图创建一个 Fiddle,但它在那里不起作用,所以I've put up a link here to demo what I mean

我已将保存结果的divheight 设置为100%。但是,它不会一直延伸到固定页脚。

#found-results { 
    height: 100%px;
    margin-bottom: 50px;
    background: #CCC;
}

我还希望绿色框向下延伸到页脚。 CSS 是:

.main {
    width: 606px;
    float: left;
    padding: 15px 0 0 16px;
    position: absolute;
    background: green;
    margin-left: 383px;
}

现在,如果我将height: 100%; 添加到其中,它似乎可以工作,但如果其中一个选项卡包含大量文本,则它延伸得不够远。

任何帮助将不胜感激。

【问题讨论】:

    标签: html css height


    【解决方案1】:

    我认为你的问题在这里:#found-results { height: 100%px; ...

    ...而且我认为你也必须添加这个:

    html, body {height: 100%}
    

    【讨论】:

      【解决方案2】:

      我想你是在追求这样的事情吗? jsFiddle

      我只从您的网站复制了我需要的标记,class's、id's 和使用的元素与您网站上的完全相同,这让我自己变得更容易了,应该让您可以相当轻松地在您的网站上实施此解决方案。

      此布局将始终至少填满整个屏幕,并且两个部分将具有相同的高度并触及固定的页脚。当其中一个部分的内容太高时,会出现一个滚动条,您可以向下滚动,直到到达两个部分的底部。两个部分将始终具有相同的高度。我在标题中添加了一些按钮,这些按钮将添加和删除列内的内容,这样可以很容易地看到当内容高于文档高度时会发生什么。

      编辑

      我意识到您可能也希望修复您的标题(您当前的网站似乎就是这种情况),这是一个带有固定标题的版本。 jsFiddle.

      编辑2

      我在小提琴中添加了一些按钮,以便更容易看到当列内的内容强制列高于文档高度时会发生什么。

      HTML

      <header></header>
      <div id="container">
          <section class="results"></section>
          <section class="main"></section>
      </div>
      <footer></footer>
      

      CSS

      html, body {
          height: 100%;
          margin: 0px;
          padding: 0px;
      }
      header {
          position: fixed;
          top: 0px;
          height: 60px;
          width: 100%;
          background-color: #FFF;
      }
      #container {
          height: 100%;
          overflow:auto;
          padding-top: 60px;
          padding-bottom: 60px;
          display: table;
          width: 100%;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
      }
      footer {
          position: fixed;
          bottom: 0px;
          height: 60px;
          background-color: #333333;
          width: 100%;
      }
      .main {
          display: table-cell;
          background-color: #008000;
      }
      .results {
          display: table-cell;
          background-color: #EFEFEF;
          width: 383px;
      }
      body:before {
          content:"";
          height:100%;
          float:left;
          width:0;
          margin-top:-32767px;
      }
      

      【讨论】:

        【解决方案3】:

        等高列

        在某种程度上,棘手的部分不是固定的页眉和页脚,也不是 100% 的高度;棘手的部分是等高的列。通常,最好伪造等高的列(例如,将grey-green background image 添加到父容器中)。与真正的等高列相比,这样做通常可以使代码更简单、更灵活、更稳定。如果这个网站的布局被证明过于笨拙,请尝试假装等高的列(如demo 所示),看看这是否有助于布局变得更易于管理。

        话虽如此,真正等高列的基本选项如下:

        这是一个JSFiddle demo,使用 CSS 表格,具有真正的等高列。左栏的内容很高,右栏的内容很短。该演示在 IE10、Firefox、Chrome、Safari 和 Opera 中测试良好;但是,这可能只适用于相对简单的布局。

        这里是similar demo using HTML tables,以防需要支持 IE8。

        伪造等高列

        这是another demo,它通过添加2-color background image 来伪造等高列。此演示在 IE10、Firefox、Chrome、Safari 和 Opera 中也测试良好;但是,与以前的不同,它更有可能支持复杂的页面布局。

        HTML

        <div id="header">...</div>
        <div id="content" class="clearfix">
            <div class="column1">...</div>
            <div class="column2">...</div>
        </div>
        <div id="footer">...</div>
        

        CSS

        html, body {
            height: 100%;
            ...
        }
        #header {
            position: fixed;
            top: 0;
            height: 120px;
            ...
        }
        #footer {
            position: fixed;
            bottom: 0;
            height: 60px;
            ...
        }
        #content {
            min-height: 100%;
            padding: 120px 0 60px 0;
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            background: url(some-two-color-background.png) repeat-y 53.6% top;
            ...
        }
        #content .column1 {
            float: left;
            width: 250px;
        }
        #content .column2 {
            float: left;
            width: 350px;
        }
        

        注意:背景图像的明显列宽是通过设置background-position 属性来控制的。这允许使用相同的通用背景图像伪造任何显式宽度(px 或 %)的两列。或者,可以使用具有精确列大小的自定义背景图像来简化 CSS。

        【讨论】:

        • jsfiddle 上的假等高示例中的背景图像链接似乎已损坏(编辑:它间歇性工作,状态 403(禁止)),ps 深度回答很好。
        • @TrondHatlen:感谢您的提醒!我正在使用 imgur.com,但还没有充分了解它是否是一项可靠的服务。将图像移动到不同的服务器。
        • 你不认为当已经有一个为问题提供解决方案的答案时,你觉得可以改进,那么你的答案中的“主要示例”不应该是提供与之前已经提供的完全相同的解决方案?
        • @user1846192:恕我直言,当你发布你的答案时,我花了一个小时写下我的答案。我注意到了相似之处,并推迟了我的时间,直到我可以添加足够的内容来区分它。这主要是指出等高柱是问题难度的核心,以及假装等高柱作为简化事情的一种方式的建议。您的回答都没有解决。此外,当我发布我的答案时,您当时的答案版本(在 Edit2 之前)似乎无法成功处理非常高的内容,因此它似乎不完整(据我所知)。
        • 嗯,很公平,的确,我的演示并没有真正“证明”他们在您发布答案时对高内容进行了罚款,即使答案包含有关如何操作的书面说明检查它们在高含量的情况下是否可以正常工作(并且它们确实可以正常工作)。我只是想,既然您提到了很多其他选项,您可以选择另一个作为主要示例,特别是因为我的答案在 IE8 中不起作用(例如,使用真实表格可能会解决这个问题?)。 P.S. 你的 CSS 和小提琴确实有拼写错误:box-zizing.
        【解决方案4】:

        加载页面后可以根据侧边栏的高度用jquery设置高度

        $(document).ready(function(){
            $('#main').height($('#sidebar').height());
        });
        

        【讨论】:

          【解决方案5】:

          您可以使用 Jquery 来实现这一点。

          $(document).ready(function() {
              var window_height = $(window).height();
              var footer_h = $("#footer").height();
              var container_height = window_height - footer_h ;
              $("#container").hide();
              $("#container").css('min-height', container_height + "px");
              $("#container").show();
          });
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2011-08-05
            • 2014-07-28
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2015-08-28
            • 1970-01-01
            相关资源
            最近更新 更多