All right?
I need a help in css, I want to scroll but I can not there every time I increase the value of the footer height it covers the background where it was actually to get the 2 elements and the scroll bar is displayed, follows the code, who knows why this is happening of a help;
const Container = styled.div'
text-align: center;
background-color: #ffffff;
overflow: scroll;
';
const Logo = styled.img'
height: 90px;
float: left;
';
const NavBar = styled.nav'
background: transparent;
overflow: hidden;
'
const Header = styled.header'
';
const FooterUnderHeader = styled.footer'
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background-color: #ffffff;
color: white;
text-align: center;
';
const HeaderBack = styled.div'
background-image: url(${logoImg});
bottom: 0;
color: black;
left: 0;
padding: 3em;
position: fixed;
right: 0;
text-align: center;
top: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: scroll;
max-height: 959px;
padding: 90px 90px 90px 90px;
';
const Title = styled.h1'
font-size: 3.8em;
text-align: left;
color: #ffffff;
';
const TextUnder = styled.h3'
font-size: 1.0em;
text-align: left;
color: #ffffff;
white-space: nowrap;
width: 10em;
overflow: hidden;
text-overflow: clip;
'
class App extends React.Component {
public render() {
return (
<Container>
<Header>
<HeaderBack>
<NavBar>
<Logo src={bannerImg} alt="logo" />
<RaisedButton label = "Blog" />
<RaisedButton label = "Baixar App" />
<RaisedButton label = "Quero ser um ..." />
<RaisedButton label = "Quem somos" />
</NavBar>
<Title>Baixe o App e <br /> Seja um ..!</Title>
<TextUnder>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et maximus libe.</TextUnder>
</HeaderBack>
<FooterUnderHeader>
oi
</FooterUnderHeader>
</Header>
</Container>
);
}
}