Question

我有一个<div>，其中我试图保持恒定的宽高比（因为内部元素需要是正方形）。我已经能够计算出CSS，这样当你使窗口更少宽时，高度将相应地缩小，并且效果很好。但是，当我使窗口更多宽时，<div>会不断扩展超出父级的高度。如何阻止.BoardWrapper <div>扩展其父级？

＆＃13;

.BoardWrapper {
    width: 100%;
    padding-bottom: 50%;
    position: relative;
    border: 1px solid red;
}

.Board {
    position: absolute;
    top: 5px; bottom: 5px; left: 5px;right: 5px;
    border: 1px solid green;
}

.Left {
    height: 100%;
    position: absolute;
    left: 0; right: 30px;
    border: 1px solid blue;
}

.Right {
    height: 100%;
    width: 20px;
    float: right;
    border: 1px solid black;
}

.Container {
    position: absolute;
    top: 10vh; bottom: 5vh; left: 5vw; right: 5vw;
}

＆＃13;

<div class='Container'>
  <div class='Right'></div>
  <div class='Left'>
    <div class='BoardWrapper'>
      <div class='Board'></div>
    </div>
  </div>
</div>

＆＃13;

我真的不想在这里处理JS解决方案，因为这些都是React组件。但是，一个包含React或Semantic-UI的解决方案会很好（尽管看起来应该有一个原始的CSS解决方案）。

我不想编辑.Left，.Right或.Container，但如果有帮助，我当然可以添加额外的元素。

Answer 1

删除填充底部

.BoardWrapper {
  padding-bottom: 50%;
}

并添加高度

.BoardWrapper {
  height: 100%;
}

工作示例： https://jsfiddle.net/zwp8vwob/

保持宽高比并防止<div>展开

1 个答案: