Divs 不占用 100% 的屏幕宽度

Posted 2023-03-05

【中文标题】Divs 不占用 100% 的屏幕宽度

【英文标题】：Divs not occupying 100% screen width

【发布时间】：2021-04-19 19:44:19

【问题描述】：

我一直在开发一个产品登录页面来练习和提高我在响应式网页设计方面的技能。这是我到目前为止所取得的成就。 https://jsfiddle.net/Ghazi360/qj8zLp16/1/ 我的 div 的宽度有问题。我不明白为什么它们没有占据全屏宽度并在右侧留下一个白色的空白边框，如下所示：

我已经设置了

* 
box-sizing: border-box

&Container div 的宽度也设置为 100%。请帮我解决这个问题。我希望我能够解释我的问题。

【问题讨论】：

如果您不发布代码，我们无能为力

@Ghazi 360：请在答案部分查看我的答案 :) 希望这有助于answer response

html 和 body 元素通常有默认边距。所以你必须将margin: 0 放在这些元素的css中。

【参考方案1】：

只需在Container 上执行overflow:hidden;，您就可以开始了。

注意：这些错误有点难以捕捉。总是先在开发者窗口开始调试（一个小技巧）

CODEPEN 链接： https://codepen.io/emmeiWhite/pen/dypQqYz

#Container 
    width: 100%;
    background-color: #f5f5f5;
    overflow: hidden; /*Add this */

完整代码：

* 
    margin: 0;
    padding: 0;
    box-sizing: border-box;


body 
    margin: 0;
    padding: 0;
    width: 100%;


#Container 
    width: 100%;
    background-color: #f5f5f5;
    overflow:hidden;


#header 
    width: 100%;
    height: 50px;
    background-color: red;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-gap: 10px;
    position: fixed;


#headerImg 
    width: 100%;
    height: 50px;
    background-image: url("https://freesvg.org/img/optical.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;


#header-img 
    display: none;



#nav-bar 
    width: 100%;
    height: 50px;
    background-color: rgb(126, 126, 31);
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;


.nav-link 
    font-size: 18px;
    font-family: poppins;
    text-decoration: none;
    color: white;
    border-bottom: 2px solid black;


.nav-link:hover 
    transition: .8s;
    color: black;
    border-bottom: 2px solid white;


#About 
    width: 100%;
    height: 300px;
    background-color: chocolate;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;


#About h1 
    font-size: 42px;
    font-family: poppins;
    margin-top: 40px;
    padding: 5px;


#About p 
    font-size: 18px;
    font-family: poppins;
    padding: 10px;


@media only screen and (max-width: 425px) 
    .nav-link 
        font-size: 12px;
    
    
    #About 
        height: 430px;
    

    #About h1 
        font-size: 32px;
    

    #About p 
        font-size: 14px;
    


#Features 
    width: 100%;
    height: 500px;
    background-color: brown;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;


.grid 
    width: 100%;
    height: 150px;
    display: grid;
    grid-template-columns: 25% 75%;
    grid-gap: 10px;


.premiumIcon 
    width: 82px;
    background-image: url("https://www.flaticon.com/svg/vstatic/svg/2997/2997131.svg?token=exp=1610648143~hmac=0e319e924a0a195adb6360e2ea9596c8");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;


.fastIcon 
    width: 82px;
    background-image: url("https://www.flaticon.com/svg/vstatic/svg/1792/1792671.svg?token=exp=1610648298~hmac=ae66efe447d060ac530f58333ef179f6");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;


.qualityIcon 
    width: 82px;
    background-image: url("https://www.flaticon.com/svg/vstatic/svg/2649/2649798.svg?token=exp=1610646201~hmac=12c57329928c0f4774f73b68b9359a54");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;


.desc 
    padding: 15px 5px 0px 5px;


.desc h2 
    font-size: 22px;
    font-family: poppins;
    padding: 10px;


.desc p 
    font-size: 14px;
    font-family: poppins;
    padding: 10px;


@media only screen and (max-width: 425px) 
    #Features 
        height: 500px;
    

    .grid 
        height: 100px;
    

    .premiumIcon,
    .fastIcon,
    .qualityIcon 
        width: 52px;
    

    .desc 
        padding: 0;
    

    .desc h2 
        font-size: 16px;
    

    .desc p 
        font-size: 12px;
    


#Video 
    width: 100%;
    height: 400px;
    background-color: chartreuse;
    display: flex;
    justify-content: center;
    align-items: center;


#Video iframe 
    max-width: 560px;


#Products 
    width: 100%;
    height: 300px;
    background-color: darkorchid;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;


@media only screen and (max-width: 425px) 
    #Products 
        height: 700px;
    


.card 
    max-width: 200px;
    height: 215px;
    background: rgb(163, 86, 86);
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transition: 0.3s ease-in-out;


.imgBx 
    width: 200px;
    height: 215px;


.img1 
    background-image: url("https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


.img2 
    background-image: url("https://images.unsplash.com/photo-1509695507497-903c140c43b0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


.img3 
    background-image: url("https://lh3.googleusercontent.com/proxy/3lUUwuh-2MSiNDoxUeLIhenDfsd5c5OXJ71uG16L8_ciXyQG-9tKphBYpx4Z6oHqiWQWP_i7tvbvlX0DABn6jv6xsUkEvEOIdbStL22RSV9AFqBzHi2Dqnpi05_h8kmqWqLacaWDv5_lWpVvsVQ");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


.card:hover 
    height: 250px;


.card .content 
    position: relative;
    margin-top: -140px;
    padding: 10px 15px;
    text-align: center;
    color: #111;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease-in-out;


.card:hover .content 
    visibility: visible;
    opacity: 1;
    margin-top: -10px;
    transition-delay: 0.3s;


.content h2 
    color: black;
    font-size:30px;
    font-family: poppins;


#form 
    width: 100%;
    height: 200px;
    background-color: dodgerblue;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;


#form h2 
    font-family: poppins;
    padding-bottom: 30px;
    text-align: center;


#email 
    width: 50%;
    height: 50px;
    border-radius: 30px;
    padding-left: 10px;
    border: none;
    outline: none;
    font-size: 18px;
    font-family: poppins;
    box-sizing: border-box;


#submit 
    width: 100px;
    height: 40px;
    margin-top: 10px;
    font-size: 20px;
    font-family: poppins;
    border: none;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    text-align: center;


@media only screen and (max-width: 425px) 
    #form 
        height: 300px;
    

    #email 
        width: 250px;
    


#footer 
    margin-top: 30px;
    background-color: #ddd;
    padding: 20px;

  
#footer ul 
    display: flex;
    justify-content: flex-end;
    list-style: none;

  
#footer li 
    padding: 0 10px;


#footer a 
    font-size: 14px;
    font-family: poppins;
    color: #000;
    text-decoration: none;

  
#footer span 
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    font-size: 0.9em;
    color: #444;
    font-size: 14px;
    font-family: poppins;

<div id="Container">
        <header id="header">
            <div id="headerImg">
                <img id="header-img" src="https://freesvg.org/img/optical.png"  id="header-img">
            </div>
            <nav id="nav-bar">
                <a class="nav-link" href="#About">About</a>
                <a class="nav-link" href="#Features">Features</a>
                <a class="nav-link" href="#Products">Pricing</a>
            </nav>
        </header>
        <div id="About">
            <h1>Ghazi Eyewear</h1>
            <p> Pakistan's Leading Online Sunglasses Shop Established 2004
                Ghazi Eyewear stands out for its exclusive eyewear, glamorous frames 
                and colors to match your confidence.
                Ghazi Eyewear provide you with the most complete eye care possible.
                In our online store, you can choose from an excellent selection of 
                named brands. Ghazi Eyewear is offering
                exceptional range of Men's Original Sunglasses at amazing
                prices in Pakistan, accompanied with free home delivery to your 
                door step. We guarantee for providing best and reliable perfect frames.
                We also provide the best prescription eyewear.
            </p>
        </div>
        <div id="Features">
            <div class="grid">
                <div class="premiumIcon"></div>
                <div class="desc">
                    <h2>Premium Materials</h2>
                    <p> Our frames use the finest material which is sourced locally.
                        This will increase the longevity of your purchase.
                    </p>
                </div>
            </div>
            <div class="grid">
                <div class="fastIcon"></div>
                <div class="desc">
                    <h2>Fast Shipping</h2>
                    <p> We make sure you recieve your glasses as soon as we have finished 
                        making it. We also provide free returns if you are not satisfied.
                    </p>
                </div>
            </div>
            <div class="grid">
                <div class="qualityIcon"></div>
                <div class="desc">
                    <h2>Quality Assurance</h2>
                    <p> For every purchase you make, we will ensure there are no damages or
                        faults and we will check and test the quality of your purchase.
                    </p>
                </div>
            </div>
        </div>
        <div id="Video">
            <iframe id="video"   src="https://www.youtube.com/embed/wwM9mnw4v4s" allowfullscreen="true"></iframe>
        </div>
        <div id="Products">
            <div class="card">
                <div class="imgBx img1"></div>
                <div class="content">
                  <h2>Men Sunglasses</h2>
                </div>
            </div>
            <div class="card">
                <div class="imgBx img2"></div>
                <div class="content">
                  <h2>Women Sunglasses</h2>
                </div>
            </div>
            <div class="card">
                <div class="imgBx img3"></div>
                <div class="content">
                  <h2>Eye Care Products</h2>
                </div>
            </div>
        </div>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <h2>Subscribe to our Newsletter!</h2>
            <input name="email" id="email" type="email" placeholder="Enter your email" required>
            <input name="submit" id="submit" type="submit" value="subscribe">
        </form>
        <footer id="footer">
            <ul>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
            <span>Copyright 2021, Ghazi 360</span>
          </footer>
    </div>

【讨论】：

你的回答真的很有帮助。

谢谢 :) 我没有在我的解决方案中指出 grid-gap 问题是因为，我认为您需要代码中的网格间隙，因为您明确使用了该属性:) 这就是为什么我想出了上面的解决方案！！！无论如何 ！很高兴您从其他程序员那里得到了完美的答案:) 干杯！！！

【参考方案2】：

导致溢出的原因是#header 和.grid 中的grid-gap 属性，它们不计入您添加的百分比值，您应该删除它并使用填充来创建所需的间距。

编辑：

 #header 
    width: 100%;
    height: 50px;
    background-color: red;
    display: grid;
    grid-template-columns: 30% 70%;
    /* grid-gap: 10px; remove this */
    position: fixed;

.grid 
    width: 100%;
    height: 150px;
    display: grid;
    grid-template-columns: 25% 75%;
    /* grid-gap: 10px; and this */

编辑 2：

或者你也可以使用fr单元来占用剩余空间，仍然使用grid-gap属性：

 #header 
    width: 100%;
    height: 50px;
    background-color: red;
    display: grid;
    grid-template-columns: 30% 1fr; /* 1fr will be 70% - 10px */
    grid-gap: 10px;
    position: fixed;

.grid 
    width: 100%;
    height: 150px;
    display: grid;
    grid-template-columns: 25% 1fr; /* 1fr will be 75% - 10px */
    grid-gap: 10px;

【讨论】：

感谢您指出真正的问题。现在我知道为什么标题被溢出了。这是我要学习的新东西。

不客气，我也从这个问题中了解到：D

【参考方案3】：

其他人指出您的网格没有将grid-gap 计算在内。 但真正要解决的问题是，我在 Features div 中发现了您的 grid-template，而该 div 不包括 grid-gap。

如果您仍想保留grid-gap，请尝试将grid-template-columns 的值分别降低到23% 75%。因此，您允许 grid-gap 中的 10px 占用空间。

.grid 
    width: 100%;
    height: 150px;
    display: grid;
    grid-template-columns: 23% 75%;
    grid-gap: 10px;

当然，调整你认为合适的值，并确保你计算了grid-gap。

【讨论】：

感谢您的指出。我没有计算导致溢出的网格间隙。