Html CSS Calc 视口单位解决方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21224411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Calc Viewport Units Workaround?
提问by golmschenk
From what I've seen in otheranswers, CSS viewport units can't be used in calc()statements yet. What I would like to achieve is the following statement:
从我在其他答案中看到的，CSS 视口单位还不能在calc()语句中使用。我想实现的是以下声明：
height: calc(100vh - 75vw)
Is there some workaround way I can achieve this using purely CSSeven though the viewport units can't be used in the calc()statement? Or just CSS and HTML? I know I can do it dynamically using javascript, but I'd prefer CSS.
即使在语句中不能使用视口单位，是否有一些解决方法可以使用纯 CSS来实现这一点calc()？或者只是 CSS 和 HTML？我知道我可以使用 javascript 动态地做到这一点，但我更喜欢 CSS。
回答by Danield
Before I answer this, I'd like to point out that Chrome and IE 10+ actually supports calc with viewport units.
在我回答这个问题之前，我想指出 Chrome 和 IE 10+ 实际上支持带有视口单位的 calc。
FIDDLE(In IE10+)
小提琴（在 IE10+ 中）
Solution (for other browsers): box-sizing
解决方案（对于其他浏览器）：box-sizing
1) Start of by setting your height as 100vh.
1) 首先将您的高度设置为 100vh。
2) With box-sizing set to border-box - add a padding-top of 75vw. This means that the padding will be part f the inner height.
2) 将 box-sizing 设置为 border-box - 添加 75vw 的 padding-top。这意味着填充将成为内部高度的一部分。
3) Just offset the extra padding-top with a negative margin-top
3）只需用负边距顶部抵消额外的padding-top
FIDDLE
小提琴
div
{
/*height: calc(100vh - 75vw);*/
height: 100vh;
margin-top: -75vw;
padding-top: 75vw;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: pink;
}
回答by MatTheCat
As a workaround you can use the fact percent vertical padding and margin are computed from the container width. It's quite a ugly solution and I don't know if you'll be able to use it but well, it works: http://jsfiddle.net/bFWT9/
作为一种解决方法，您可以使用事实百分比垂直填充和边距是根据容器宽度计算的。这是一个相当丑陋的解决方案，我不知道你是否能够使用它，但很好，它有效：http: //jsfiddle.net/bFWT9/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>It works!</div>
</body>
</html>
html, body, div {
height: 100%;
}
body {
margin: 0;
}
div {
box-sizing: border-box;
margin-top: -75%;
padding-top: 75%;
background: #d35400;
color: #fff;
}
回答by MD Ashik
<div>It's working fine.....</div>
div
{
height: calc(100vh - 8vw);
background: #000;
overflow:visible;
color: red;
}
Check here this css code right now support All browser without Opera
在这里检查这个 css 代码现在支持所有浏览器没有 Opera
Live
居住
回答by Artif3x
Doing this with a CSS Grid is pretty easy. The trick is to set the grid's height to 100vw, then assign one of the rows to 75vw, and the remaining one (optional) to 1fr. This gives you, from what I assume is what you're after, a ratio-locked resizing container.
使用 CSS Grid 执行此操作非常简单。诀窍是将网格的高度设置为 100vw，然后将其中一行分配给 75vw，将剩余的一行（可选）分配给 1fr。根据我的假设，这为您提供了一个比例锁定的调整大小容器。
Example here: https://codesandbox.io/s/21r4z95p7j
这里的例子：https: //codesandbox.io/s/21r4z95p7j
You can even utilize the bottom gutter space if you so choose, simply by adding another "item".
如果您愿意，您甚至可以利用底部排水沟空间，只需添加另一个“项目”即可。
Edit: StackOverflow's built-in code runner has some side effects. Pop over to the codesandbox link and you'll see the ratio in action.
编辑：StackOverflow 的内置代码运行器有一些副作用。弹出到代码和框链接，您将看到实际中的比率。
body {
margin: 0;
padding: 0;
background-color: #334;
color: #eee;
}
.main {
min-height: 100vh;
min-width: 100vw;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 75vw 1fr;
}
.item {
background-color: #558;
padding: 2px;
margin: 1px;
}
.item.dead {
background-color: transparent;
}<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/index.css" />
</head>
<body>
<div id="app">
<div class="main">
<div class="item">Item 1</div>
<!-- <div class="item dead">Item 2 (dead area)</div> -->
</div>
</div>
</body>
</html>