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

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

如何运作

我们的主要目标是：

居中对齐.sc
对齐.sc垂直居中
确保.sc始终为sqaure
让.sc响应

广场的响应性很强，因为它根据窗口或视口的高度和宽度改变其高度和宽度。我们需要使用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是导航后的剩余区域。我们通过使用calc属性从100％中减去nav宽度来确保这一点。

.sc位于main内，我们添加了额外的max-width和max-height属性，以确保.sc始终根据{main自行调整大小1}}。

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

将width: calc(100% - 96px);添加到main，我们确保其最大宽度等于max-width: 100%;的宽度。

现在，.sc和main以及max-height的宽度和高度保持不变，它始终是一个正方形。

最后，我们将max-width和.sc放在nav内，这是一个flexbox并具有main属性。这将确保正方形始终相对于.wrapper垂直居中。

Answer 2

这可以通过视口单元完成。

<强> 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 3

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

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

＆＃13;

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

＆＃13;

<nav>
  Navigation
</nav>

<main>
  This should be square
</main>

＆＃13;

JSfiddle demo没有max-height ...我认为您可以通过CSS方法查看问题。

CSS用于创建具有固定比率的元素

3 个答案:

如何运作