Question

我希望我的设计的两个部分（参见附图）扩展页面的整个高度。我试图创建一个小提琴，但它只是在那里工作，所以I've put up a link here to demo what I mean。

enter image description here

我已将保留结果的height的{{1}}设置为div。但是，它并没有伸展到固定的页脚。

100%

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

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

现在，如果我向其添加.main { width: 606px; float: left; padding: 15px 0 0 16px; position: absolute; background: green; margin-left: 383px; }，它似乎可以正常工作，但如果其中一个标签包含大量文字，那么它就不会伸展得足够远。

非常感谢任何帮助。

Answer 1

等高柱

在某种程度上，棘手的部分不是固定的页眉和页脚，或100％的高度;棘手的部分是等高柱。通常，伪造等高的列（例如，向父容器添加grey-green background image）会更好。与真正的等高度列相比，这样做通常允许代码更简单，更灵活，更稳定。如果此网站的布局过于笨重，请尝试伪装等高列（如此demo所示），看看是否有助于布局变得更易于管理。

话虽如此，真正的等高列的基本选项如下：

HTML表格
CSS tables
CSS3 flexbox
CSS3 grids
JavaScript或jQuery

这是使用CSS表格的JSFiddle demo真正等高的列。左栏的内容非常高，右栏的内容很短。该演示在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。

Answer 2

我认为你是在追求这样的事情？ jsFiddle

我通过仅从您的网站复制我需要的标记，class，id来使我自己变得更容易，并且使用的元素与您的完全相同网站，这将使您在网站上实施此解决方案变得相当容易。

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

修改

我意识到你可能也想要修复你的标题（因为在你当前的网站上似乎就是这种情况），这里是一个带有固定标题的版本。 jsFiddle

<强> EDIT2

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

<强> 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; }

Answer 3

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

...而且我认为你也必须加上这个：

html, body {height: 100%}

Answer 4

您可以在加载页面

后根据侧边栏的高度使用jquery设置高度

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

Answer 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();
});

如何让div伸展到一个固定的页脚

5 个答案:

等高柱

伪造等高柱