Nasıl css kullanarak tarayıcının% 100'ü divs almak için?

Benim html içinde çok sayıda div var.% 100 genişlikte olmak istediğim tarayıcının tarayıcımdan yoruldum. 'Width: 100%' eklemek için 'div' her birine, divlerin hiçbiri % 100 genişlik ve her div, beyaz boşlukları gösteren farklı bir genişlik gibi görünüyor. Ben de taşmaya çalıştım: gizli; css'deki divların her birine ama bu işe yaramadı.Nasıl css kullanarak tarayıcının% 100'ü divs almak için?

İşte İşte benim 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; 
 
}

kaynak

2016-04-05 Rebekah

Sorun çok basit benim 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>

olduğunu. Sen width:100% kullanarak ve

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

kaynak

2016-04-05 11:18:47

Ne yazık ki bu işe yaramadı – Rebekah

snippet'te mükemmel çalışma ... sorun ne kaldı? –

hiçbir şey tüm tarafından değiştirilmez hala hata ayıklandı – Rebekah

Sen vh kullanabilirsiniz Eğer dolgu genişliği

içinde birleştirilecektir geçtiği bir css özelliği box-sizing:border-box ayarlamak gerektiğini sorun için bu kadar da padding ancak dolgu genişliğini artırır edilir alternatif bir çözüm olarak. % ile
tüm ebeveynler üzerinde uygulamak için height: 100% almalıdır.

Kontrol referans İşte here

demo

kaynak

2016-04-05 11:19:38

ben genişliği eklemek benim css yorgun olması tarayıcının% 100 genişlik olmak istiyorum geçerli: 100%; CSS
vw 
1vw = 1% of viewport width 
100vw = 100% of viewport width 
için

Kullanım Görünüm birimleri kadar tarayıcı olarak genişliğini almak için 100vw için div genişliğini ayarlayın.

See compatibility

width:100% aracı kendi ana elemanı genişliği% 100 yapmak. Eğer ebeveyniniz hiç 20px genişliğinde bir şey söylemişse, o zaman bu ebeveynin içindeki iç divunuz% 100 ayarlanmış olsa bile sadece 20px demektir. Bu durumda, tüm dolgu payı vb. Dikkate alınacak ve daha sonra ebeveynin kalan genişliği% 100 genişliktedir. Görünüm bağlantı noktasını kullanmak, sorununuzu kolayca çözmelidir. Else öğelerinizin, dolgu, kenar boşluğu vb.'yi kaldırarak tarayıcı genişliğine% 100 olduğundan emin olun ...

kaynak

2016-04-05 11:20:19

Nasıl css kullanarak tarayıcının% 100'ü divs almak için?

cevap

İlgili konular