How to allow CSS scroll

0

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>
     );
      }
    }
    
asked by anonymous 09.09.2018 / 14:12

0 answers