Question

我的html中有一些div我希望100％宽度的浏览器我已经厌倦了我的css添加`width：100％;`给每个div，没有一个div占用宽度为100％，每个div似乎是一个不同的宽度，显示白色空格。我也试图溢出：隐藏;对于css中的每个div，但这还没有奏效。

这是我的HTML

＆＃13;

<body>        
    <div id="container">
        <div id ="pic">
            <img src="logo2.png"alt="me"/>
        </div>

        <div id ="about">
            <p>Here is example text</p>
        </div>
    </div>

    <div id ="work">
        <p>Here is example text</p>

        <div id ="yearone">
            <h2>Year One</h2>        
            <p>Here is example text</p>
        </div>

        <div id="yeartwo">
            <p>Here is example text</p>
        </div>

       <div id="portfoilo">
           <p>Here is example text</p>
       </div>

       <div id ="otherwork">
           <p>Here is example text</p>
       </div>

       <div id="email">
          <p>Here is example text</p>

           <div class="social">
               <p>Here is example text</p>
           </div>

＆＃13;

这是我的css

＆＃13;

#container
{
    width: 100%;         
}

#pic {       
    text-align: center;
    background:#D78B7D;        
}
   

h1 {
   font-family: "kepler-std-extended-display",serif;
}

#about {        
    text-align:center;
    background:#D78B7D;
   
    color: #fff;
    line-height:2.5;
    font-size:120.5%;
    overflow: hidden;
}

#work {
    padding:0;
    margin:0;
    color:#fff;
    line-height:2;
    width:100%;
    padding-left:45px;
    text-align:center;
    background-color:#62868D;
    padding-right:100px;
    padding-top:20px;
    overflow: hidden;
}

#yearone {
    padding-top:40px;
    overflow: hidden;
}

#yeartwo {
    padding-top:40px;
    padding-bottom:20px;
    overflow: hidden;
}

#portfoilo {
    padding:0;
    margin:0;
    line-height:2;
    padding-top:30px;
    color:#fff;
    width:100%;
    
    text-align:center;
    background:#D78B7D;
    
    padding-bottom:40px;
    overflow: hidden;
}

#otherwork {
    padding:0;
    margin:0;
    padding-top:30px;
    color:#fff;
    width:100%;
    
    text-align:center;
    background:#62868D;
    
    padding-bottom:40px;
    overflow: hidden;
}

#email {
    padding:0;
    margin:0;
    line-height:2;
    padding-top:30px;
    color:#fff;
    width:100%;
    text-align:center;
    background:#D78B7D;
    padding-bottom:40px;
     overflow: hidden;
}

.social {
    padding:0;
    margin:0;
    line-height:2;
    padding-top:30px;
    color:#fff;
    width:100%;
  
    text-align:center;
    background:#62868D;
    
    padding-bottom:40px;
}

＆＃13;

Answer 1

问题很简单。您正在使用width:100%并使用填充，但填充会增加宽度，因此对于该问题，您需要设置一个css属性box-sizing:border-box，填充将以宽度合并

＆＃13;

*{
  box-sizing:border-box;
}
#container
{
    width: 100%;
     
}

#pic {
   
    text-align: center;
    background:#D78B7D;  
    
  
}
   

h1 {
  font-family: "kepler-std-extended-display",serif;
  }

#about {
    
    text-align:center;
    background:#D78B7D;
   
    color: #fff;
    line-height:2.5;
    font-size:120.5%;
     overflow: hidden;
}



#work {
    padding:0;
    margin:0;
    color:#fff;
    line-height:2;
    width:100%;
    padding-left:45px;
    text-align:center;
    background-color:#62868D;
    padding-right:100px;
    padding-top:20px;
     overflow: hidden;
}

#yearone {
    padding-top:40px;
     overflow: hidden;

}

#yeartwo {
    padding-top:40px;
    padding-bottom:20px;
     overflow: hidden;
}

#portfoilo {
    padding:0;
    margin:0;
    line-height:2;
    padding-top:30px;
    color:#fff;
    width:100%;
    
    text-align:center;
    background:#D78B7D;
    
    padding-bottom:40px;
     overflow: hidden;
}

#otherwork {
    padding:0;
    margin:0;
    padding-top:30px;
    color:#fff;
    width:100%;
    
    text-align:center;
    background:#62868D;
    
    padding-bottom:40px;
    overflow: hidden;
}

#email {
    padding:0;
    margin:0;
    line-height:2;
    padding-top:30px;
    color:#fff;
    width:100%;
    text-align:center;
    background:#D78B7D;
    padding-bottom:40px;
     overflow: hidden;
}





.social {

       padding:0;
    margin:0;
    line-height:2;
    padding-top:30px;
    color:#fff;
    width:100%;
  
    text-align:center;
    background:#62868D;
    
    padding-bottom:40px;
}

＆＃13;

<body>

    
<div id="container">

  <div id ="pic">

    <img src="logo2.png"alt="me"/>
    

</div>

<div id ="about">


<p>Here is example text</p>


</div>


</div>

<div id ="work">

<p>Here is example text</p>

    <div id ="yearone">

    <h2>Year One</h2>

    
 <p>Here is example text</p>
  


</div>

<div id="yeartwo">
<p>Here is example text</p>

 


</div>

<div id="portfoilo">

  <p>Here is example text</p>

   
        </div>

<div id ="otherwork">
<p>Here is example text</p>
        </div>


<div id="email">

    <p>Here is example text</p>

<div class="social">
<p>Here is example text</p>

    </div>

＆＃13;

Answer 2

我希望100％宽度的浏览器我已经厌倦了我的css添加宽度：100％;

使用CSS的视口单元

vw
1vw = 1% of viewport width
100vw = 100% of viewport width

将div宽度设置为100vw，以获得与浏览器一样多的宽度。

See compatibility

width:100%表示将元素宽度设为其父的100％。如果你的父母已经说了20px的宽度，那么你的内部div就在这个父级内部，即使设置为100％也只是意味着20px。因此，在您的情况下，将考虑所有填充边距等，然后父母的剩余宽度是100％宽度。使用视口可以轻松解决您的问题。否则，通过删除填充，边距等来确保您的父元素是浏览器宽度的100％...

Answer 3

您可以使用vh作为替代解决方案。
所有家长都应%申请height: 100%。

检查参考here

这是demo

如何使用css获得100％的浏览器div？

3 个答案: