Javascript CSS（或JS）设置div的高度，使其宽度等于一个正方形

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

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

到目前为止，我所拥有的：

基本上，从上面的示例中，我需要红色和紫色div始终为方形，无论浏览器的高度或宽度如何

有人有什么建议吗？提前谢谢

---

<>布瑞恩

嗯，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" });
    };

---

浏览器和元素在元素高度（不以像素、厘米……指定的高度）非常糟糕，为什么不考虑使用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" });
    };

---

用纯CSS是不可能做到这一点的。您必须创建一个Javascript函数，该函数：

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

---

您还可以使用Javascript设置块的高度，但您已经使用CSS对其进行了修复。

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

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

您也可以使用Javascript设置块的高度，但您已经使用CSS对其进行了修复。

CSS唯一解决方案：

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

vh

是一个视口高度百分比单位，是视口的一部分

现在对视口CSS单元的支持非常好，请参见

如果您需要支持IECSS唯一解决方案：

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

vh

是一个视口高度百分比单位，是视口的一部分

现在对视口CSS单元的支持非常好，请参见

---

如果您需要支持IE，下面是我提出的一个简单的基于jQuery的解决方案（）：

该函数背后的逻辑很简单——在DOM就绪时触发.resize（）事件（因此是链接），并侦听.resize（）事件。我已将jQuery对象

$w

分配给

$（窗口）

，以简化操作

提示：

.resize（）

事件可能是一个好主意，因为在某些浏览器中，该事件被触发的频率太高，在调整大小时可能会影响站点的性能

---

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

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

---

下面是我提出的一个简单的基于jQuery的解决方案（）：

该函数背后的逻辑很简单——在DOM就绪时触发.resize（）事件（因此是链接），并侦听.resize（）事件。我已将jQuery对象

$w

分配给

$（窗口）

，以简化操作

提示：

.resize（）

事件可能是一个好主意，因为在某些浏览器中，该事件被触发的频率太高，在调整大小时可能会影响站点的性能

---

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

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

---

哦，如果您需要扩展主要内容以填充剩余的浏览器宽度，请随时联系@me，尽管我想在这种情况下，一个新问题更合适，因为有很多方法可以做到这一点。谢谢您的演示和解释，效果非常好。。我会假设让主要内容填充剩余的浏览器宽度，我会将宽度从75%更改为100%，对吗？再次感谢。@BrianEspinosa这取决于您想要达到的效果，例如，将主要内容设置为

100%

width意味着其中一些内容将位于侧边栏框下方。获得自动扩展主内容的方法是使用带有垂直浮动清除的浮动，而不是两个框的绝对位置，主内容是位于框左侧的div包装或块格式上下文。下面是上述内容的快速说明：。您将不得不根据您的用例进行调整，或者就您发现的问题提出另一个问题。OP，如果您需要扩展主要内容以填充剩余的浏览器宽度，请随时联系@me，虽然我想在这种情况下，一个新问题会更合适，因为有很多方法可以做到这一点。谢谢你的演示和解释，效果非常好。。我会假设让主要内容填充剩余的浏览器宽度，我会将宽度从75%更改为100%，对吗？再次感谢。@BrianEspinosa这取决于您想要达到的效果，例如，将主要内容设置为

100%

width意味着其中一些内容将位于侧边栏框下方。获得自动扩展主内容的方法是使用带有垂直浮动清除的浮动，而不是两个框的绝对位置，主内容是位于框左侧的div包装或块格式上下文。下面是上述内容的快速说明：。您必须根据您的用例进行调整，或者就您发现的问题提出另一个问题。为什么会有否决票？作者没有要求非JS解决方案。谢谢。。这实际上也是一个很好的解决方案。我也不知道为什么会投反对票，但我增加了。为什么会投反对票？作者没有要求非JS解决方案。谢谢。。这实际上也是一个很好的解决方案。我也不知道为什么会投反对票，但我增加了它。CSS来保持相对维度CSS来保持相对维度