I'm working on a layout with a fixed gradient div that contains all my content. However, I want the content to be scrollable instead of fixed. How can I make this happen?
Here is the current structure:
<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.
</div>
</div>
</div>
.gradient {
height: calc(100%);
background: -webkit-linear-gradient(270deg, #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{
/* Styles for dates */
}
.year{
/* Styles for year */
}
.location{
/* Location styles */
}
.logo{
/* Logo styles */
}
.statement{
/* Statement styles */
}
.footer ul {
/* Footer list styles */
}
.footer-wrap{
/* Footer wrap styles */
}