Bir sayfanın belirli bölümlerini CSS'de yüzdeler kullanarak belirtebilir miyim?

Question

Web sitemde yatay bir kaydırma sayfası oluşturmaya çalışıyorum. Dört sayfam olduğu için tüm kaydırma bölümünü% 400 olarak ayarlıyorum. Bununla birlikte, ilk sayfa için% 0-100, ikinci sayfa için% 100 -% 200 kullanabilmem için% 400'lük bir kesim yapmak mümkün olduğunu merak ediyordum (CSS, jQuery vb. Kullanarak). Ya da bunun başka bir yolu var (bunu tarayıcılar arası/ekran boyutu uyumluluğu için yapmaya çalışıyorum). Bunu sadece sabit pikseller kullanarak şimdiye kadar yapmayı başardım, ancak bunu yüzde olarak değiştirmenin bir yolu var mı?

HTML:

<div id="transition-slide-container"> 
    <div id="transition-slide"> 
     <div id="inner-container> 
     <div class="slide" id="home"> 
      <h1>home</h1> 
     </div> 
     </div> 
     <div class="slide" id="portfolio"> 
      <div id="inner-container"> 
      <h1>portfolio</h1> 
      </div> 
     </div> 
     <div class="slide" id="about"> 
      <div id="inner-container"> 
      <p>about</p> 
      </div> 
     </div>     
     <div class="slide" id="contact"> 
      <div id="inner-container"> 
      <p>contact<p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

div#transition-slide-container {  
    background: #bee1ff;  
    padding-top: 128px; 
    padding-bottom: 50px; 
    height: 900px; 
    min-width: 400%;  
    z-index: -1; 
    float: left; 
    position: relative; 
} 
div#transition-slide { 
    white-space: nowrap; 
} 
.slide { 
    display: inline-block; 
    width: 1620px; 
    margin: 0 auto; 
} 
div#inner-container { 
    width: 1024px; 
    margin: 0 auto; 
    padding: 0; 
} 

Web sitesi: andrewgu12.kodingen.com

Answer 1

için 100% genişlik verebilir.

demo

ve # html iç konteyner nedir?

Answer 2

translition slayt% 400 genişlik ve her slayt% 100 olmalıdır. Kapsayıcı% 100 genişlik, taşma olacaktır: javascript/anchors veya overflow-x ile kaydırma yapmak isterseniz: scroll;

Answer 3

Eğer 100% için .slide genişliğini ayarlamak ve vücudunuza background-color: #bee1ff; verebileceğiniz .slide sınıfa

.slide { 
    display: inline-block; 
    width: 100%; 
    margin: 0 auto; 
}