如何修复无法正常响应的导航栏答案

【问题标题】：How do i fix my navbar that won't go responsive properly如何修复无法正常响应的导航栏
【发布时间】：2020-07-08 06:10:52
【问题描述】：

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

这是 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 上查看之前，它一切正常，即使我将宽度设置为 100%，但当我将其缩小时，它仍然没有到达另一端

【问题讨论】：

您需要从页脚中删除填充并将其放在子元素上。

标签： html css responsive-design responsive

【解决方案1】：

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

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

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

border-box 告诉浏览器考虑任何边框和填充您为元素的宽度和高度指定的值。如果你设置一个元素的宽度为 100 像素，这 100 像素将包括任何您添加的边框或填充，内容框将缩小以吸收那个额外的宽度。这通常会使调整大小变得容易得多元素。

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>

【讨论】：