如何让两个垂直元素之一的高度依赖于另一个?
[英] How to let one of two vertical elements' height depend on another?
本文介绍了如何让两个垂直元素之一的高度依赖于另一个?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在制作一个圣诞礼物网站，上面只有两个元素，我想要这样:
底部元素是一个图像，它应该与视口的底部对齐.它应该按比例调整大小，最多占视口宽度的 90% 和最大视口高度的 70%.上部元素是一个文本元素，我希望它填充剩余的垂直空间并将该文本水平和垂直对齐到中心.
在这种情况下，如果底部元素需要 70vh，解决方案很简单，上部元素应该需要 30vh.但如果底部元素较小，则上部框的高度应为(视口高度-上部元素高度).
这是我目前所拥有的.
body {背景图片:url('https://i.imgur.com/sWfZ8nq.png');背景重复:重复；}.fg {保证金:自动；位置:绝对；顶部:0；底部:0；左:0；右:0；最大高度:100%；}.fg div {显示:弹性；对齐项目:居中；位置:绝对；宽度:100%；高度:100%；最大高度:30%；}.fg 跨度 {宽度:100%；文本对齐:居中；白颜色;字体大小:10vmin；字母间距:3px；文本阴影:2px 2px 2px 绿色，2px -2px 2px 绿色，-2px 2px 2px 绿色，-2px -2px 2px 绿色；}.fg 图像 {位置:绝对；底部:0；左:50%；变换:translateX(-50%);最大高度:70%；最大宽度:90%；}
<头><title>HNY</title><meta charset="utf-8"><身体><div class="fg"><div><span>新年快乐！</span>
<img src="https://i.imgur.com/Ql8A585.png"/>
</html>
这适用于底部元素高度 = 70vh，例如分辨率 1920 x 1080.但是如果我翻转它，即切换到 1080 x 1920，上框只需要 30vh，但我希望它填充空间.有什么建议吗?
解决方案
为此我使用了网格 css.我将 .fg 设置为 100vh 并将主体边距设置为 0 以避免溢出问题.因为您需要上层响应 img 大小，所以我将网格行设置为:grid-template-rows: 1fr auto;，这意味着网格的上半部分占用剩余空间.还将图像位置更改为相对以使其与网格一起工作.
body {背景图片:url('https://i.imgur.com/sWfZ8nq.png');背景重复:重复；边距:0；}.fg {显示:网格；网格模板行:1fr 自动；保证金:自动；高度:100vh；}.fg div {显示:弹性；对齐项目:居中；宽度:100%；高度:100%；}.fg 跨度 {宽度:100%；文本对齐:居中；白颜色;字体大小:10vmin；字母间距:3px；文本阴影:2px 2px 2px 绿色，2px -2px 2px 绿色，-2px 2px 2px 绿色，-2px -2px 2px 绿色；}.fg 图像 {位置:相对；底部:0；左:50%；变换:translateX(-50%);最大高度:70vh；最大宽度:90vw；}
<头><title>HNY</title><meta charset="utf-8"><身体><div class="fg"><div><span>新年快乐！</span>
<img src="https://i.imgur.com/Ql8A585.png"/>
</html>
I am working on a Christmas gift website and have just two elements on it, which I want to have like this:
The bottom element is an image, which should be aligned to the bottom of the viewport. It should be resized proportionally and take maximum 90% of the viewport width and maximum 70% of the viewport height. The upper element is a text element and I want it to fill the remaining vertical space and align that text to the center horizontally and vertically.
In the case, if the bottom element takes 70vh, the solution is easy, the upper element should take 30vh. But If the bottom element is smaller, the height of the upper box should be (view port height - upper element height).
This is what I have so far.
body {
background-image: url('https://i.imgur.com/sWfZ8nq.png');
background-repeat: repeat;
}
.fg {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-height: 100%;
}
.fg div {
display: flex;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
max-height: 30%;
}
.fg span {
width: 100%;
text-align: center;
color: white;
font-size: 10vmin;
letter-spacing: 3px;
text-shadow: 2px 2px 2px green,
2px -2px 2px green,
-2px 2px 2px green,
-2px -2px 2px green;
}
.fg img {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-height: 70%;
max-width: 90%;
}
<html>
<head>
<title>HNY</title>
<meta charset="utf-8">
</head>
<body>
<div class="fg">
<div>
<span>Happy new year!</span>
</div>
<img src="https://i.imgur.com/Ql8A585.png"/>
</div>
</body>
</html>
That works fine for bottom element height = 70vh, for example for resolution 1920 x 1080. But if I flip it, i.e. switch to 1080 x 1920, the upper box takes only 30vh, but i want it to fill the space. Any suggestions?
解决方案
I used grid css for this. I set .fg to 100vh and the body margin to 0 to avoid the overflow problem. Because you needed the upper to repond to the img size, I set the grid rows to: grid-template-rows: 1fr auto;, meaning the top half of the grid takes the remaining space. Also changed the image position to relative to get it working with grid.
body {
background-image: url('https://i.imgur.com/sWfZ8nq.png');
background-repeat: repeat;
margin: 0;
}
.fg {
display: grid;
grid-template-rows: 1fr auto;
margin: auto;
height: 100vh;
}
.fg div {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
.fg span {
width: 100%;
text-align: center;
color: white;
font-size: 10vmin;
letter-spacing: 3px;
text-shadow: 2px 2px 2px green,
2px -2px 2px green,
-2px 2px 2px green,
-2px -2px 2px green;
}
.fg img {
position: relative;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-height: 70vh;
max-width: 90vw;
}
<html>
<head>
<title>HNY</title>
<meta charset="utf-8">
</head>
<body>
<div class="fg">
<div>
<span>Happy new year!</span>
</div>
<img src="https://i.imgur.com/Ql8A585.png"/>
</div>
</body>
</html>
这篇关于如何让两个垂直元素之一的高度依赖于另一个?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
