两列布局，两列高度相同且均填充屏幕的整个高度

two column layout, both columns same height AND both fill full height of the screen

本文关键字：两列 高度 屏幕 填充 布局      更新时间：2024-01-09

我需要一个两列布局，其中两列的高度都必须相同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());
}));

你想过通过CSS将高度设置为100%吗？

http://jsfiddle.net/ahCs7/

 html,body { height:100%;}
.column { width:50%; height:100%; float:left;}
相关文章：