CSS创建固定比例的元素[重复](CSS to create element with fixed ratio [duplicate])

这个问题在这里已有答案：

保持div的宽高比但是在CSS中填充屏幕宽度和高度？ 7个答案

我想创建一个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>

This question already has an answer here:

Maintain aspect ratio of div but fill screen width and height in CSS? 8 answers

I want to create an HTML page with:

A fixed-width, full-height Navigation pane on the left A square element in the centre of the remaining area

I want this square to be as big as possible, expanding to fill the area not taken up by the navigation pane.

I have a JavaScript solution for this (see below and as a jsFiddle), but I'm hoping that it is possible to do this as a CSS only solution.

<!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>

最满意答案

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调整自身大小。

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

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

既然如此， max-height和max-width以及.sc宽度和高度都保持不变，它将始终是一个正方形。

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

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

How it works

Our main objective here is to:

Center align .sc Align .sc vertically center Make sure .sc is always a sqaure Make .sc responsive

The square is highly responsive as it changes its height and width according to the window's or view port's height and width. We need to use vw (viewport's width) and vmin (lowest value between viewport's height and width). Read more about these units here: https://css-tricks.com/viewport-sized-typography/

To make .sc a square, we need to make sure its width and height are always equal. Since the ratio of height and width of viewport is not always the same, we need to find out the lowest value between these two and assign them to .sc which can be done using the vmin unit mentioned above.

The square should always remain centered in the remaining area after the navigation on the left, never cross the remaining area and resize accordingly.

This can be accomplished the following codes:

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 is the remaining area after nav. We make sure of this by using the calc property to subtract the nav width from 100%.

The .sc is placed inside main and we have added the extra max-width and max-height properties to make sure .sc always resizes itself according to main.

max-height: calc(100vw - 96px); property of .sc is always equal to width: calc(100% - 96px); property of main. They both calculate the same values.

By adding max-width: 100%; to .sc we make sure it's maximum width is equal to that of main.

Now since, both the max-height and max-width along with width and height of .sc remain the same, it will always be a square.

At the end we put both nav and main inside .wrapper which is a flexbox and has align-items: center; property. This will ensure that the square is always vertically centered with respect to the nav.

更多推荐