Question

我正在尝试设计一些我以前从未做过的事情。带静态页脚的设计，包含导航，反向标准。但是，它引发了我一个问题。页脚是position: fixed;，但我真的不希望任何内容重叠。我添加了margin-bottom与页脚高度相等，这可以确保我的所有内容都滚动到足以在页脚上方看到。但是，这似乎使页面看起来很容易。

我想知道，有没有办法确定页面的高度并动态调整两列的高度？也许使用jquery？

HERE是一个大致展示我想要的设计的小提琴。如果右侧的内容需要滚动，那么左侧只是向外看。目前，我只专注于左侧列，这是一种根据实际浏览器窗口的高度进行调整的方法。

谢谢。

Answer 1

有一个JQuery解决方案

function resizeViewport() {
  //calculate the available space for the columns
  var height = window.innerHeight - $(".footer").innerHeight();
  //set the height to the columns wrapper
  $(".frontpage").height(height + "px");
}

$(function() {
  //regiter onresize function
  $(window).resize(resizeViewport); //register onresize function
  resizeViewport(); //resize at the first time
});

并添加此样式以不关注溢出和身体边距

body { margin: 0 }

.frontpage { overflow: hidden; }

有一个例子http://jsfiddle.net/zbqf3c3L/

Answer 2

我正在通过从我的几个文件中获取一些东西来处理您需要的代码 - 请耐心等待：

此功能将为您提供视口的高度和宽度。

function RKN_getViewportSize() {
     var e = window, a = 'inner';
     if (!('innerWidth' in window )) {
          a = 'client';
          e = document.documentElement || document.body;
     }
     return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

以下是调用它的示例：

var viewPortSize = RKN_getViewportSize();

以下是使用它的代码：

margins = (viewPortSize.width - infoDiv.offsetWidth) / 2;

该语句设置边距用于设置除法的边距，它来自我自己的一些代码，我在这里只是作为使用函数返回的值的示例来显示。

您要做的是使用RKN_getViewportSize函数并将其放在.js文件中。（RKN是我的姓名缩写）

在functionname中（使用你想要的任何名称），调用viewport函数，如下所示：

var viewPortSize = RKN_getViewportSize();

然后使用viewPortSize.Height值设置div的高度

document.getElementById("divsID").style.height = viewPortSize.Height + "px";

您可能需要通过使高度略小于视口的高度来赋予它一个软糖因子。只是玩它。如果您有问题，请回到这里并对我的回答发表评论。

基本的functioname函数是：

function functionname() {
    var viewPortSize = RKN_getViewportSize();
    document.getElementById("divsID").style.height = viewPortSize.Height + "px";
}

如果你想稍微捏一下身高，只需将声明改为：

document.getElementById("divsID").style.height = viewPortSize.Height -  n + "px";

n是您想要减去的任意数量的像素

添加：

onresize="functionname();"

到body标签，以便在视口更改大小时执行functionname函数 - 调整浏览器大小时或拉出使用部分视口的Firebug。

请注意，对viewPortSize的引用是高度（大写字母H）。

注意 - 需要+“px”。如果您未设置单位，则高度的更改将不会生效。

如何根据浏览器大小调整div的高度

2 个答案: