2016-04-28 196 views
0

我有這個固定的漸變div,我所有的內容都必須在這個光標位置元素繼續工作。問題是我想要內容滾動,而不是固定的。我怎樣才能做到這一點?相對位置固定div內的div?

以下是我有:

<body> 

     <div class="wrapper"> 
      <div class="gradient"> 
      <div class="logo"> 
       <img src="logo-05.svg"> 
      </div> 

      <div class="statement"> 
       This is a blockquote. Someone said something really funny and it should be noted here. Aenean massa strong . Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In em enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam link dictum felis eu pede mollis pretium. This is a blockquote. Someone said something really funny and it should be noted here. Aenean massa strong . Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In em enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam link dictum felis eu pede mollis pretium. 
      </div> 
      </div> 
     </div> 


    .gradient { 
     height: calc(100%); 
     background: -webkit-linear-gradient(270deg, #FFCC33,#FF3366); 
     background: -moz-linear-gradient(270deg, #FFCC33,#FF3366); 
     background: -o-linear-gradient(270deg, #FFCC33,#FF3366); 
     background: -ms-linear-gradient(270deg, #FFCC33,#FF3366); 
     background: linear-gradient(180deg, #FFCC33,#FF3366); 
     position: fixed; 
     width: 100%; 
     background-color: #292c2f; 
     font-family: monospace; 
     overflow: hidden; 
     font-size: 100pt; 
     color: white; 
     z-index: -99; 
    } 

.wrapper{ 
    width: 100%; 
    height:100%; 
    position: relative; 
} 

.header{ 
    width: 100%; 
    position: fixed; 
} 

.dates{ 
    color:black; 
    z-index: 99; 
    display: inline-block; 
    float: left; 
    padding-top: 5px; 
    font-size: 20pt; 
    margin-left: -20px; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 400; 
    letter-spacing: 1pt; 
} 


.year{ 
    color:black; 
    margin-top: -10px; 
    z-index: 99; 
display: inline-block; 
    top:25px; 
    font-size: 55pt; 
    margin-left: 20px; 
    font-family: 'Kavoon', sans-serif; 
    font-weight: 800; 
    letter-spacing:-3px; 
} 

.location{ 
right: 35px; 
top: 35px; 
text-align: right; 
width: 100%; 
position: fixed; 
font-size: 20pt; 
font-family: 'Roboto', sans-serif; 
font-weight: 400; 
color: black; 
} 

.logo{ 
    margin-right: auto; 
    margin-left: auto; 
    width: 600px; 
    position: relative; 
} 

.statement{ 
    position: relative; 
    font-size: 14pt; 
    color:black; 
    width:500px; 
    margin-right: auto; 
    margin-left: auto; 
    font-family: 'Roboto', sans-serif; 
} 

.footer ul { 
    text-align: center; 
    font-size: 14pt; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 800; 
    width:100%; 
    display:inline-block; 
    text-transform: uppercase; 

} 
.footer-wrap{ 
    color:black; 
    width: 100%; 
    text-align: center; 
    margin-bottom: 45px; 
    bottom: 0; 
    position: fixed; 
    padding:10; 

    display: inline-block; 
} 

回答

1

你的財產overflow:hidden;只是改變overflow: scroll;.gradient類。

JSFiddle