Question

我需要一个两列布局，其中两列都需要相同的高度AND，如果两个div的内容都不够高，那么两列都需要拉伸到页面底部。

我一直在使用javascript来均衡高度并确保它们延伸到页面的底部并且工作正常但我也使用ajax来构建一个我插入的小表。这导致内容拉伸，因此意味着我已经给予高度的div不再向下拉伸等等。我想我可以使用更多的javascript根据我的桌子的高度来增加更多的高度但是必须是一种更简单的方法。

我对css不是很好，大多数情况下它往往不起作用，我认为这将是最明智的方式，但必须有一种方法可以并排获得两列不同颜色的列，这是完整的高度页面，彼此相同的高度，并在添加更多内容时拉伸。

最好的方法是什么？

这里有趣的是我的js

// Equalise the heights of the two main columns and body
var $toEqualize = $('.equalheightbox');
var wS = $(window).height();
$toEqualize.css('height', (function(){
    return Math.max.apply(null, $toEqualize.map(function(){
        var addALittle = $(this).height() + 50;
        $('body').css('height', (wS > addALittle ? wS : addALittle));
        return wS > addALittle ? wS : addALittle;
    }).get());
}));

Answer 1

您是否考虑过通过CSS将高度设置为100％？

http://jsfiddle.net/ahCs7/

 html,body { height:100%;}
.column { width:50%; height:100%; float:left;}

两列布局，两列相同的高度和两者都填满了屏幕的全高

1 个答案: