我想创建一个包含以下内容的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>
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垂直居中。
这可以通过视口单元来实现。
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/
视口单位和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>