Html CSS根据父元素的维度比率设置子元素的维度

我试图找出一个CSS唯一的解决方案，让一个方形子元素展开，直到它达到响应父元素的宽度或高度

因此，如果父对象的高度大于宽度，则子对象受父对象的宽度限制；如果父对象的宽度大于高度，则子对象受高度限制。红色是孩子：

基本上（尝试移动垂直分隔符以调整结果窗格的大小）不使用JS

既然苏坚持要包含代码，这里又是链接的提琴

$（窗口）。调整大小（onResize）；
设置超时（onResize）；//渲染后的队列
变量内容=$（'.content'）；
变量框=$（'.box'）；
函数onResize（）{
var w=content.width（）；
var h=content.height（）；
如果（w>h）{//按高度限制“框”
css（'width'，h+'px'）；
css（'padding-bottom'，h+'px'）；
}else{//按宽度限制“框”
css（'宽度'，''）；
css（'padding-bottom'，''）；
}
}

html，
身体{
身高：100%；
}
身体{
保证金：0；
背景色：rgb（30,30,30）；
}
正文>div{
显示：内联块；
}
.侧边栏{
背景色：rgb（50,50,50）；
身高：100%；
宽度：20%；
}
.内容{
背景色：rgb（100100100）；
位置：相对位置；
身高：100%；
宽度：80%；
}
.盒子{
轮廓：实心1px暗色；
背景色：rgb（120、120、120）；
位置：绝对位置；
宽度：100%；
垫底：100%；
左：0；
右：0；
保证金：0自动；
}

---

根据父项更改子项的css总是很困难的。 然而，在你们的情况下，你们也许可以使用“vh”和“vw”，也可以使用窗户的高度或宽度。另一个不太灵活的解决方案是断点。 上面的例子不需要JS，只需使用vh就可以轻松实现。看看这里是什么样子：

html，
身体{
身高：100%；
}
身体{
保证金：0；
背景色：rgb（30,30,30）；
}
正文>div{
显示：内联块；
}
.侧边栏{
背景色：rgb（50,50,50）；
高度：100vh；
宽度：20vw；
}
.内容{
背景色：rgb（100100100）；
位置：相对位置；
高度：100vh；
宽度：80vw；
}
.盒子{
轮廓：实心1px暗色；
背景色：rgb（120、120、120）；
位置：绝对位置；
宽度：100vh；
垫底：100%；
左：0；
右：0；
保证金：0自动；
}

根据父项更改子项的css总是很困难的。 然而，在你们的情况下，你们也许可以使用“vh”和“vw”，也可以使用窗户的高度或宽度。另一个不太灵活的解决方案是断点。 上面的例子不需要JS，只需使用vh就可以轻松实现。看看这里是什么样子：

html，
身体{
身高：100%；
}
身体{
保证金：0；
背景色：rgb（30,30,30）；
}
正文>div{
显示：内联块；
}
.侧边栏{
背景色：rgb（50,50,50）；
高度：100vh；
宽度：20vw；
}
.内容{
背景色：rgb（100100100）；
位置：相对位置；
高度：100vh；
宽度：80vw；
}
.盒子{
轮廓：实心1px暗色；
背景色：rgb（120、120、120）；
位置：绝对位置；
宽度：100vh；
垫底：100%；
左：0；
右：0；
保证金：0自动；
}

可能。只是预感：使用

最大宽度：100%

和

最大高度：100%

…而不是

宽度：100%

。只是预感：使用

最大宽度：100%

和

最大高度：100%

而不是

宽度：100%

…谢谢，但是我有其他元素围绕着

.content

，这会破坏视口单位方法。谢谢，但是我有其他元素围绕着

。content

这会破坏视口单位方法。

<div class="sidebar"></div><!--
--><div class="content">
  <div class="box"></div>
</div>

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(30, 30, 30);
}

body > div {
  display: inline-block;
}

.sidebar {
  background-color: rgb(50, 50, 50);
  height: 100vh;
  width: 20vw;
}

.content {
  background-color: rgb(100, 100, 100);
  position: relative;
  height: 100vh;
  width: 80vw;
}

.box {
  outline: solid 1px darkred;
  background-color: rgb(120, 120, 120);
  position: absolute;
  width: 100vh;
  padding-bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}