我该如何修复无法正确响应的导航栏

Question

当我尝试制作一个响应式导航栏时，我运行遇到了这个宽度问题

所以这是 HTML 代码

body{
     margin: 0;
    }
    
    .nav{
        background-color: lightgreen;
        height: 40px;
        width: 100%;
    }
    .footer{
        background-color: #333;
        font-size: 18px;
        padding: 20px;
        width: 100%;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="nav"></div>
        <div class="footer">
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
        </div>
    </body>
    </html>

在我进入“开发者工具”并在 android 上查看它之前一切正常

Answer 1

您遇到的问题是页脚。默认情况下，填充会添加到元素的整体宽度和高度。因此，当您为页脚提供 100% 的宽度和 20px 的填充时，宽度实际上变为 100%+20px+20px。

通过在页脚 class 中添加 box-sizing:border-box 可以轻松解决这个问题。或者很多人只是将它设置为 *{box-sizing:border-box} 这样的每个元素，这样你就不会再遇到这个问题了。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

body{
     margin: 0;
    }
    
    .nav{
        background-color: lightgreen;
        height: 40px;
        width: 100%;
    }
    .footer{
        background-color: #333;
        font-size: 18px;
        padding: 20px;
        width: 100%;
        box-sizing:border-box
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="nav"></div>
        <div class="footer">
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
        </div>
    </body>
    </html>

我该如何修复无法正确响应的导航栏

How do i fix my navbar that won't go responsive properly

html

css

responsive-design

responsive