10

我希望我的设计的两个部分（见附图）扩展页面的整个高度。我试图创建一个 Fiddle，但它在那里不起作用，所以我在这里放了一个链接来演示我的意思。

在此处输入图像描述

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

#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%;它，它似乎可以工作，但如果其中一个选项卡包含大量文本，它就不会延伸得足够远。

任何帮助都感激不尽。

4

5 回答 5

11

等高柱

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

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

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

这是一个使用 HTML 表格的类似演示，以防需要对 IE8 的支持。

伪造等高列

这是另一个通过添加2 色背景图像来伪造等高列的演示。此演示在 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。

于 2013-05-22T02:13:50.543 回答
6

我想你是在追求这样的事情吗？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;
}
于 2013-05-21T23:37:46.207 回答
0

You can use Jquery to achieve this. 

$(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();
});
于 2013-05-28T08:09:49.827 回答
0

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

$(document).ready(function(){
    $('#main').height($('#sidebar').height());
});
于 2013-05-25T21:31:01.790 回答
0

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

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

html, body {height: 100%}
于 2013-05-16T23:19:49.580 回答