Question

不确定为什么，但我很难将这个问题写成一个可读的问题，但现在就去了。

我正在试图找出一种方法，让两个叠加的方形div填满浏览器的高度。我已经搜索并找到了许多方法来保持div的正方形基于宽度，但似乎无法根据视口高度找到任何东西。

到目前为止我所拥有的：http://codepen.io/jointmedias/full/mxlLC

基本上，从上面的例子来看，无论浏览器的高度或宽度如何，我都需要红色和紫色的div总是正方形。

有人有任何提示吗？谢谢你提前。

布赖恩

Answer 1

仅CSS解决方案：

.side-top, .side-bottom {
    width: 50vh;
    height: 50vh;
}

Demo

vh是视口高度百分比单位，是CSS3 Values and Units的一部分。

现在支持Viewport CSS单元非常好，请参阅support table。

如果您需要支持IE＆lt; = 8和Android股票浏览器，您将需要JS后备。

Answer 2

这是我提出的基于jQuery的简单解决方案（http://codepen.io/terrymun/pen/nEDoA）：

$(function() {
  var $w = $(window);

  $w.resize(function() {
    $(".side-content > div")
      .height($w.height() * 0.5)
      .width($w.height() * 0.5);
    $(".main-content")
      .width($w.width() - $w.height() * 0.5);
  }).resize();
});

函数背后的逻辑很简单 - 当DOM准备好（因此链接）时触发.resize（）事件，并且还监听.resize（）事件。我已将jQuery对象$w分配给$(window)以简化操作。

提示：throttle .resize()事件可能是一个好主意，因为在某些浏览器中，事件会经常被触发，并且可能会在调整大小时阻碍您网站的性能。

我也可以自由地简化你的CSS：

.side-content > div {
  position: absolute;
  right: 0;
}
.side-top {
    background: red;
}
.side-bottom {
    background: purple;
    top: 50%;
}

Answer 3

好的Html和浏览器在元素高度上非常糟糕（高度未指定像素，cm ......），为什么不考虑使用javascript？你可以用jquery轻松完成这个：

$(window).resize(function () {
            //perform any resize logic here
            //I use timeout logic here so that the resizing function does
            //not repeat so many times and consume more resources than it should
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(adjustNews, 100);
        });
function adjustNews() {
        $('.yourTwoElementsByClass').css({ width: $(this).height() + "px" });
    };

Answer 4

使用纯CSS无法做到这一点。您必须创建一个Javascript函数：

调整浏览器视口大小时调用
检索两个块之一的高度
将块的宽度设置为检索到的高度

你也可以使用Javascript设置块的高度，但是你已经使用CSS修复了它。

CSS（或JS）设置div的高度，宽度等于制作正方形

4 个答案: