html - CSS根据父级的尺寸比例设置子级元素的尺寸

我正在尝试找出仅CSS的解决方案，以扩展方形子元素，直到其达到响应父元素的宽度或高度。

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




基本上this（尝试移动垂直分隔符以调整结果窗格的大小）而没有JS。

由于SO坚持包含代码，因此这里又是链接的小提琴。

$(window).resize(onResize);
setTimeout(onResize);	// queue after rendering

var content = $('.content');
var box = $('.box');

function onResize() {
  var w = content.width();
  var h = content.height();

  if (w > h) {  // limit "box" by height
    box.css('width', h + 'px');
    box.css('padding-bottom', h + 'px');
  } else {	// limit "box" by width
    box.css('width', '');
    box.css('padding-bottom', '');
  }
}

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: 100%;
  width: 20%;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar"></div><!--
--><div class="content">
  <div class="box"></div>
</div>

最佳答案

总是很难根据父母改变孩子的css。
但是，您可以根据情况使用“ vh”和“ vw”，并使用窗口的高度或宽度。另一个不太灵活的解决方案是断点。
仅使用vh即可轻松实现上述示例，而无需使用JS。看到这里是什么样子：https://jsfiddle.net/jzsqtcac/

<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;
}

关于html - CSS根据父级的尺寸比例设置子级元素的尺寸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41094599/