1

不知道为什么，但我很难把它变成一个可读的问题，但这里有。

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

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

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

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

布赖恩

4

4 回答 4

3

仅 CSS 解决方案：

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

演示

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

现在对 Viewport CSS 单元的支持非常好，请参阅支持表。

如果您需要支持 IE<=8 和 android stock 浏览器，您将需要一个 JS 后备。

于 2013-10-20T19:32:56.537 回答
0

这是我提出的一个简单的基于 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)简化事情。

提示：限制事件可能是个好主意，.resize()因为在某些浏览器中，事件被触发太频繁，并且可能会在调整大小时影响站点的性能。

我还冒昧地进一步简化了您的 CSS：

.side-content > div {
  position: absolute;
  right: 0;
}
.side-top {
    background: red;
}
.side-bottom {
    background: purple;
    top: 50%;
}
于 2013-10-20T19:37:27.057 回答
-1

那么 Html 和浏览器在元素高度（高度未以像素、厘米...）方面非常糟糕，为什么不考虑使用 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" });
    };
于 2013-10-20T19:30:14.067 回答
-1

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

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

您还可以使用 Javascript 设置块的高度，但您已经使用 CSS 修复了该问题。

于 2013-10-20T19:30:21.130 回答