divをcssを使用してブラウザの100％にするにはどうすればいいですか？

私は自分のHTML内にdivの数を持っていますが、ブラウザの100％の幅にしたいと思っています。私は自分のCSSで 'width：100％;'を各divに追加するのに疲れています。幅は100％で、各divは空白を示す幅が異なるようです。私はまたオーバーフローしようとした：隠された; CSSのdivのそれぞれには、これは機能していません。divをcssを使用してブラウザの100％にするにはどうすればいいですか？

はここにここに私のcss

#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; 
 
}

出典

2016-04-05 Rebekah

問題は非常に簡単である私のhtml

<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>

です。あなたはwidth:100%を使用しても、パディングを使用しますが、パディングは、パディングは幅

あなたが使用することができます

*{ 
 
    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; 
 
}

<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>

出典

2016-04-05 11:18:47

悲しいことに、これはうまくいきませんでした – Rebekah

問題は残っていますか？ –

divでまだ何も変わらない – Rebekah

にマージされます、それを通してあなたはCSSプロパティbox-sizing:border-boxを設定する必要があり、その問題のためのように、幅を増大させているvh代替ソリューションとして。
と%の場合は、すべての親がheight: 100%を申請する必要があります。

はここhere

は私が幅を追加するために、私のCSSで疲れていブラウザの100％幅になりたいdemo

出典

2016-04-05 11:19:38

ある参照を確認してください：100％; CSS
vw 
1vw = 1% of viewport width 
100vw = 100% of viewport width 
ため

使用ビューポートユニットは、できるだけ多くのブラウザがあるとして幅を取得するために100vwにあなたのdivの幅を設定します。

See compatibility

width:100%

手段は、親の要素幅に対して100％を作ります。あなたの親が20pxの幅を指定していて、この親の内側のdivが100％に設定されていても、それは20pxを意味します。したがって、あなたのケースでは、すべてのパディングマージンなどが考慮され、親の残りの幅が100％の幅になります。ビューポートを使用して問題を簡単に解決する必要があります。そうでなければ、パディング、マージンなどを削除して、親要素がブラウザの幅に対して100％であることを確認してください。

出典

2016-04-05 11:20:19

divをcssを使用してブラウザの100％にするにはどうすればいいですか？

答えて

関連する問題