时间戳

首页 > 解决方案 > 如何强制我的导航和按钮保持恒定高度？

html - 如何强制我的导航和按钮保持恒定高度？

问题描述

我有以下代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            /*header*/
            .header {
                
                padding: 2.5vw;
                position: relative;
                background: linear-gradient(to right, #EE7752 25%, #E73C7E 50%, #23A6D5 75%, #23D5AB 100%);
                background-size: 200% 200%;
                animation: Gradiente 15s ease infinite;
                font-size:15px;
            }
    
            @keyframes Gradiente {
                0% {
                    background-position: 0% 50%
                }
    
                50% {
                    background-position: 100% 50%
                }
    
                100% {
                    background-position: 0% 50%
                }
            }
    
            .header p {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%)
            }
    
            /*navbar*/
            .flex {
                display: flex;
                flex-direction: row;
                width: 100%;
                
            }
    
            .option {
                display: flex;
                width: 24.7%;
                color: white;
                background-color: grey;
                justify-content: center;
                align-items: center;
                height: 4vw;
                margin-left:0.25vw;
    
            }
            #menu{
                display:none;
            }
    
            
        </style>
    </head>
    
    <body>
    
        <section class="container1">
            <div class="header">
                <h1><p>Examen B 2DAW</p></h1>
            </div>
    
            <nav>
                <div class="flex">
                    <div id="menu">Menú</div>
                    <div class="option"><a href="#"></a>Opcion 1</div>
                    <div class="option"><a href="#"></a>Opcion 2</div>
                    <div class="option"><a href="#"></a>Opcion 3</div>
                    <div class="option"><a href="#"></a>Opcion 4</div>
                </div>
            </nav>
    
        </section>
 
    
    </body>
    
    </html>

收缩时它的高度会降低，这是我不想发生的事情，因为我希望它保持恒定的高度

这就是我的看起来缩小的样子

我的缩小了

但它应该看起来像这样（保持它的高度），我尝试用 px 和 vw 设置高度，但它没有任何区别。我尝试使用不同的字体大小，但我无法解决这个问题。我需要它保持高度，同时水平变小，为什么没有发生？

在此处输入图像描述

标签： htmlcss

解决方案

我认为问题在于您的填充设置为视口宽度（vw），这将相应地改变值。如果您希望高度是静态的，请使用 px 作为填充或高度。如果需要，您可以同时使用高度和填充，但请记住，两者会相加。

        .header {
            padding-top: 20px;
            padding-bottom: 20px;
            position: relative;
            background: linear-gradient(to right, #EE7752 25%, #E73C7E 50%, #23A6D5 75%, #23D5AB 100%);
            background-size: 200% 200%;
            animation: Gradiente 15s ease infinite;
            font-size: 15px;
        }

或者

        .header {
            height: 40px;
            position: relative;
            background: linear-gradient(to right, #EE7752 25%, #E73C7E 50%, #23A6D5 75%, #23D5AB 100%);
            background-size: 200% 200%;
            animation: Gradiente 15s ease infinite;
            font-size: 15px;
        }

推荐阅读