javascript - 使用 javascript 将列粘贴到页面底部的更有效方法？

Question

我设计一个网站已经有一段时间了，它是一个两栏布局，我希望无论分辨率如何，每一栏都位于页面底部。目前要完成此操作，我有两个 JavaScript 文件 - 一个调整列长度以适应浏览器窗口，另一个 JavaScript 文件匹配调整后的大小。我遇到的一个主要问题是，如果您更改浏览器窗口大小，列不会自动调整，因此它们可能不会转到页面底部。我想知道是否有某种方法可以在一个文件中完成所有这些操作，最重要的是无论窗口大小如何，都使列始终固定在页面底部。以下是每个 JavaScript 文件的代码:

根据浏览器窗口调整列高:

$(function(){
    var grid = $(window).height();
    var gridFinal = grid - 140;
    $('.grid').css({'min-height': ((gridFinal))+'px'});
});

调整另一列以匹配调整后的列:

window.onload =  getIDHeight;

function getIDHeight() {
    var myHomeHeight = document.getElementById("home").offsetHeight;
    document.getElementById("home-services").style.height = myHomeHeight - 15 +"px";
}


window.addEventListener('load', function (){

var myNewsHeight = document.getElementById("blog").offsetHeight;
document.getElementById("social-media").style.height = myNewsHeight - 15 +"px";
});

window.addEventListener('load', function (){

var myAboutHeight = document.getElementById("references").offsetHeight;
    document.getElementById("about").style.height = myAboutHeight - 25 +"px";
});

window.addEventListener('load', function (){

var myServicesHeight = document.getElementById("services").offsetHeight;
document.getElementById("guidelines").style.height = myServicesHeight - 15 +"px";
});

window.addEventListener('load', function (){

var myTipsHeight = document.getElementById("tips").offsetHeight;
    document.getElementById("recommendations").style.height = myTipsHeight - 20 +"px";
});

window.addEventListener('load', function (){

var myContactHeight = document.getElementById("contact-info").offsetHeight;
    document.getElementById("email").style.height = myContactHeight - 15 +"px";
});

如有任何帮助，我们将不胜感激。如果有更简单的方法可以增加功能，请告诉我。

Answer 1

您可以使用 CSS 来完成。将 html 和 body 的高度设置为 100%，然后将列的高度设置为 100%

在这里 fiddle :DEMO

html,body{
    height:100%;
}
#column1{
    height:100%;
}
#column2{
    height:100%;
}