È possibile specificare alcune parti di una pagina utilizzando le percentuali in CSS?

Question

Quindi, ho cercato di creare una pagina di scorrimento orizzontale sul mio sito web. Ho impostato l'intera porzione di scorrimento al 400%, poiché ho quattro pagine. Tuttavia, mi chiedevo sarebbe possibile (usando CSS, jQuery, ecc.) Tagliare il 400% in modo da poter usare lo 0-100% per la prima pagina, il 100% -200% per la seconda pagina, ecc.? O c'è un altro modo per aggirare questo problema (ho cercato di farlo per compatibilità tra browser e dimensioni dello schermo). Sono riuscito a farlo solo usando pixel duri, ma c'è un modo per cambiarlo in percentuali?

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

Sito web: andrewgu12.kodingen.com

Answer 1

è possibile impostare la larghezza .slide-100% e dare background-color: #bee1ff; al vostro corpo.

demo

e dove è il vostro # interno-container in html?

Answer 2

translition slitta dovrebbe avere larghezza di 400% e di ogni diapositiva 100%. Il contenitore sarebbe larghezza 100%, overflow: nascosto se vuoi farlo con javascript/anchors o overflow-x: scroll;

Answer 3

si potrebbe dare 100% larghezza al vostro .slide classe

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