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

Question

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

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

基本上这个 （尝试移动垂直隔板来调整结果窗格），而不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> 

Answer 1

总是很难根据父母来改变孩子的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;
}