问题：

CSS创建固定比例的元素[重复]

岑鸣

2023-03-14

我想创建一个包含以下内容的HTML页面：

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

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

我有一个JavaScript解决方案（见下文和JSFIDLE），但我希望这可以作为一个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>

共有3个答案

勾通

2023-03-14

视口单位和calc可以做很多这方面的工作，但我不确定您最终想要的结果。

如果你想重新计算这两个维度，你需要javascript。

css lang-css prettyprint-override">* {
  -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>

边永贞

2023-03-14

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

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

看到这个jsFiddlehttps://jsfiddle.net/ryannwarner/hugt40cm/

黎浩然

2023-03-14

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

正方形的高度和宽度随窗口或视口的高度和宽度而变化，因此响应速度非常快。我们需要使用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调整自身大小。

最大高度：calc（100vw-96px）；. sc的属性总是等于宽度：calc（100%-96px）；main的属性。它们都计算相同的值。

通过向. sc添加max-ware： 100%；，我们确保它的最大宽度等于main的最大宽度。

从现在起，max height和max width以及的宽度和高度。sc保持不变，它将始终是一个正方形。

在最后，我们把两个nav和main放在里面。这将确保正方形始终相对于nav垂直居中。

类似资料：

固定定位元素位于半透明元素后面[重复]

我有这些要素：这是他们的CSS配置。但第一个元素落后于第二个元素。
创建一个固定大小的std:：vector并写入元素

在C中，我希望分配一个固定大小（但大小在运行时确定）的std:：vector，然后写入该向量中的元素。这是我正在使用的代码：然而，这给了我一个编译器（MSVC 2010 Pro）错误：错误C2440:“正在初始化”：无法从“常量int”转换为“int” 我对const的理解是，它使一个类的所有成员变量都是常量。例如，以下方法很好：因此，std：：vector似乎将容器的常数传播到向量的元素，
如何在固定位置元素中居中元素[重复]

我想为一个笔记应用程序添加笔记加号。我做了一个固定位置的圆，这样它总是可见的。然后，我想做两条线，形成一个加号，并将这些线居中。这是代码： null null 请告诉我如何将加号居中到固定位置的圆上。谢谢！
jQuery CSS（）用于动态创建的元素

问题内容：我正在使用jQuery CSS函数设置某些元素的样式这可行，但是页面加载后会动态创建部分元素。这应该是我被创建的事件困住了。有任何想法吗？问题答案：创建的元素没有事件（无论如何都无法通用）。你可以将规则添加到样式表，以便将其自动应用于新创建的元素创建元素时，链接 css（）方法：动态创建一个新的样式表：
固定背景固定和位置固定元素的Chrome问题

问题内容：我已经有一段时间了，这似乎是一个Chrome重绘错误，尚未修复。因此，我正在寻找任何权宜之计。主要问题是页面上的元素具有使用以下内容的背景图像时：如果另一个元素固定并具有子视频元素，则它将导致具有背景图像的元素消失。现在，它可以在Safari（以及Firefox和IE）中正常运行，因此这并不是Webkit的问题。我已经应用了一些没有用的建议属性。目前，我的解决方案只是通过媒体查
获取元素的比例值？

问题内容：我想知道如何获取元素的比例值？我尝试过哪种回报有没有一种获取途径，并且只有途径？问题答案：如果它是由矩阵指定的，我想您无法采用一种简单的方法，但是您可以轻松地解析该值：将包含scaleX 并将包含scaleY。如果有可能还应用了其他转换，则需要稍微调整正则表达式，因为现在假定所有其他参数均为0。一种仅获取比例值的方法可能是删除所有转换，测量元素的计算宽度/高度，然后将其重

CSS创建固定比例的元素[重复]

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档