CSS 以固定比例创建元素

Question

我想创建一个 HTML 页面：

左侧固定宽度、全高的导航窗格
剩余区域中心的方形元素

我希望这个正方形尽可能大，扩展以填充导航窗格未占用的区域。

我有一个 JavaScript 解决方案（见下文 jsFiddle），但我希望可以将其作为 CSS 唯一解决方案.

<!DOCTYPE html>
<html lang=en>
<head>
  <style>
    html, body {
      margin: 0;
      height: 100%;
      background-color: #fff;
    }
    nav {
      height: 100%;
      width: 96px;
      background-color: #666;
    }
    main {
      position: absolute;
      background-color: #000;
      color: #fff;
    }
  </style>  
</head>

<body>
<nav>
  Navigation
</nav>

<main>
  This should be square
</main>

<script>
;(function createSquareArea() {
  var main = document.querySelector("main")
  var nav = document.querySelector("nav")
  var navWidth = nav.getBoundingClientRect().width
  var debounceDelay = 100
  var timeout

  window.onresize = windowResized
  maintainRatio()

  function windowResized() {
    if (timeout) {
      window.clearTimeout(timeout)
    }
    timeout = window.setTimeout(maintainRatio, debounceDelay)
  }

  function maintainRatio() {
    timeout = 0

    var windowHeight = window.innerHeight
    var mainWidth = window.innerWidth - navWidth
    var minDimension = Math.min(windowHeight, mainWidth)

    var left = (mainWidth - minDimension) / 2 + navWidth
    var top = (windowHeight - minDimension) / 2

    main.style.left = left + "px"
    main.style.top = top + "px"
    main.style.width = minDimension + "px"
    main.style.height = minDimension + "px"
  }
})()
</script>
</body>
</html>

Answer 1

这可以通过视口单位来实现。

HTML

<div class='page-wrapper'>
  <nav>

  </nav>
  <div class='content'>
    <div class='square'>

    </div>
  </div>
</div>

CSS

body, html
{
  height: 100%;
}

.page-wrapper
{
  display: flex;
  height: 100%;
  width: 100%;
}

nav
{
  height: 100%;
  width: 200px;
  background-color: #444;
}

.content
{
  flex-grow: 1;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.square
{
  width: 100vh;
  height: 100vh;
  background-color: #111;
  max-width: calc( 100vw - 200px );
  max-height: calc( 100vw - 200px );
}

查看这个 jsFiddle https://jsfiddle.net/ryannwarner/hugt40cm/

Answer 2

JSFiddle：https://jsfiddle.net/ymzq6zm0/7/

HTML

<nav>
  Navigation
</nav>

<main>
  <div class="sc">
    This should be square
  </div>
</main>

CSS

   html, body {
      margin: 0;
      height: 100%;
      background-color: #fff;
    }
    .wrapper {
      display: flex;
      align-items: center;
      height: 100%;
    }
    nav {
      float: left;
      height: 100%;
      width: 96px;
      background-color: #666;
    }
    main {
      float: left;
      width: calc(100% - 96px);
      height: 100vmin;
      max-height: calc(100vw - 96px);
    }
    .sc {
      margin: 0 auto;
      background-color: #000;
      color: #fff;
      height: 100vmin;
      width: 100vmin;
      max-width: 100%;
      max-height: calc(100vw - 96px);
    }

工作原理

我们这里的mainobjective是为了：

居中对齐.sc
垂直居中对齐.sc
确保 .sc 始终是正方形
使.sc响应

正方形具有高度响应性，因为它会根据 window 或视口的高度和宽度更改其高度和宽度。我们需要使用 vw（视口的宽度）和 vmin（视口的高度和宽度之间的最小值）。在此处阅读有关这些单位的更多信息：https://css-tricks.com/viewport-sized-typography/

要使 .sc 成为正方形，我们需要确保其宽度和高度始终相等。由于视口的高宽比并不总是相同的，我们需要找出这两者之间的最小值并将它们分配给 .sc ，这可以使用上面提到的 vmin 单元来完成。

在左侧导航后，正方形应始终保持在剩余区域的中心，切勿越过剩余区域并相应调整大小。

这可以通过以下代码完成：

    nav {
      float: left;
      height: 100%;
      width: 96px;
      background-color: #666;
    }
    main {
      float: left;
      width: calc(100% - 96px);
      height: 100vmin;
      max-height: calc(100vw - 96px);
    }
    .sc {
      margin: 0 auto;
      background-color: #000;
      color: #fff;
      height: 100vmin;
      width: 100vmin;
      max-width: 100%;
      max-height: calc(100vw - 96px);
    }

main是nav后剩下的区域。我们通过使用 calc 属性从 100% 中减去 nav 宽度来确保这一点。

.sc 位于 main 内，我们添加了额外的 max-width 和 max-height 属性以确保 .sc 始终根据main.

max-height: calc(100vw - 96px); 属性 of .sc 始终等于 width: calc(100% - 96px); 属性 of main。他们都计算相同的值。

通过将 max-width: 100%; 添加到 .sc，我们确保它的最大宽度等于 main。

现在，max-height 和 max-width 以及 .sc 的宽度和高度都保持不变，因此它将始终是正方形。

最后我们将 nav 和 main 都放在 .wrapper 里面，这是一个 flexbox 并且有 align-items: center; 属性。这将确保正方形始终相对于 nav.

垂直居中

Answer 3

视口单位和 calc 可以做很多这样的事情，但我不确定您最终想要的结果。

如果您希望重新计算两个维度，您将需要javascript。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #fff;
}
nav {
  height: 100%;
  width: 96px;
  background-color: #666;
}
main {
  position: absolute;
  background-color: lightgreen;
  color: #fff;
  top: 0;
  left: 96px;
  height: calc(100vw - 96px);
  max-height: 100vh;
  width: calc(100vw - 96px);
  max-width: 100vh;
}

<nav>
  Navigation
</nav>

<main>
  This should be square
</main>

JSfiddle demo 没有 max-height...我想你可以用 CSS 方法看到问题。

CSS 以固定比例创建元素

CSS to create element with fixed ratio

css

centering

aspect-ratio

工作原理