制作两个 w3 行以适合任何分辨率下的特定 80vh

问题描述 投票：0回答：1

我使用 w3-css 中的网格。我的布局有两列。它们的总高度应为 80vh。 我的第一列有两行，它们之间的边距为 16 像素。

问题：下排和上排一样具有最小的 vh。但它们必须有 16px 的边距。如果我调整屏幕大小，下面的行将向外移动 80vh。是否可以将下部固定在 80vh“边界”处？这样调整大小时它就不会移动？我喜欢网格布局并想坚持它。只是如果没有办法我会将其更改为在任何分辨率下都灵活。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <title>Equal Heights</title>
    
</head>
<body>
    <div class="w3-main">
        <div class="w3-row" style="background-color:red; height: 80vh;">
            <div class="w3-col m6 l6" style="background-color:dimgrey;">
                <div class="w3-row">
                    <div class="w3-row" style="background-color:aliceblue; height: 34vh;">upper-row</div>
                    <div class="w3-row" style="background-color:lightblue; margin-top: 16px">
                        <div class="w3-panel w3-card-2 w3-container" style="Height:40vh; background-color:lightgreen;">lower-row</div>
                    </div>
                </div>
                
            </div>
            <div class="w3-col m6 l6" style="background-color:grey;"></div>

        </div>
        
    </div>
</body>
</html>

我尝试制作一个柔性网格。在这种情况下，每一行都有相同的高度和边距。但我必须针对不同的媒体分辨率做出更多的适应。

我的问题是我无法更改 vh 的用法。不幸的是，这是 svg 图像的图像生成器的一个错误（绘图）

我进一步尝试像

height: calc(40vh +/- n)
那样计算较低的vh，或者计算vh中16px的边距。

html css grid w3.css
1个回答
0
投票

尝试这个方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <title>Equal Heights</title>
</head>
<body>
    <div class="w3-main">
        <div class="w3-row" style="background-color: red; height: 80vh;">
            <div class="w3-col m6 l6" style="background-color: dimgrey;">
                <div class="w3-row">
                    <div class="w3-row" style="background-color: aliceblue; height: calc(34vh - 8px);">upper-row</div>
                    <div class="w3-row" style="background-color: lightblue; margin-top: 16px;">
                        <div class="w3-panel w3-card-2 w3-container" style="height: calc(40vh - 8px); background-color: lightgreen;">lower-row</div>
                    </div>
                </div>
            </div>
            <div class="w3-col m6 l6" style="background-color: grey;"></div>
        </div>
    </div>
</body>
</html>

对于上面一行，我将高度设置为 calc(34vh - 8px) 以考虑 16px 边距（顶部 8px，底部 8px）。

对于下一行，我将高度设置为 calc(40vh - 8px) 类似。 这应该使下排固定在 80vh 边界内，同时保持所需的边距。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.