Możliwe jest określenie pewnych części strony przy użyciu wartości procentowych w CSS?

Question

Tak więc, próbowałem utworzyć poziomą przewijaną stronę na mojej stronie. Ustawiłem całą porcję przewijania na 400%, ponieważ mam cztery strony. Zastanawiam się jednak, czy jest możliwe (używając CSS, jQuery itp.), Aby zmniejszyć to o 400%, dzięki czemu mogę użyć 0-100% na pierwszej stronie, 100% -200% na drugiej stronie itd.? Czy jest na to inny sposób (próbowałem to osiągnąć dla zgodności z różnymi przeglądarkami/rozmiarami ekranu). Do tej pory udało mi się to zrobić tylko używając twardych pikseli, ale czy istnieje sposób, aby zmienić to na procenty?

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

WWW: andrewgu12.kodingen.com

Answer 1

.slide można ustawić szerokość .slide do 100% i dać background-color: #bee1ff; swojego ciała.

demo

i gdzie jest twój # wewnętrzny pojemnik w html?

Answer 2

translition slajd powinien mieć szerokość 400%, a każdy slajd 100%. Kontener będzie miał szerokość 100%, przepełnienie: ukryte, jeśli chcesz to zrobić za pomocą javascript/anchors lub overflow-x: scroll;

Answer 3

można dać 100% szerokości do klasy

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