0

I'm attempting to create a layout where the app takes up 100% of the vertical and horizontal space without any overflow.

Instead this is what it looks like:

https://stoic-snyder-620f18.netlify.app/

Here's the code. Any idea what could be causing all the divs to be larger than they should be? I've been stuck on this for hours, no idea what to do.

import React, { useState } from "react"
import styled, { createGlobalStyle } from "styled-components"
import { Link } from "gatsby"
import logo_image from "../../static/logo_white_trans.png"
import fb_icon_image from "../../static/fb_icon.png"
import ig_icon_image from "../../static/ig_icon.png"
import yt_icon_image from "../../static/yt_icon.png"

const Global = createGlobalStyle`
* {
    margin: 0;
    padding: 0;
    border: 0;
}

body, html {
    height: 100%;
}

`

const Layout = () => {
    const [nav, showNav] = useState(false)

    return (
        <div id='app' style={{ height: '100vh', backgroundColor: 'pink', display: 'grid', gridTemplateRows: '15% 70% 15%' }}>
            <Global />
            <div id='header' style={{ height: '100%', backgroundColor: 'blue', display: 'grid', gridTemplateColumns: '20% 60% 20%' }}>
                <div id='logo' style={{ width: '100%', backgroundColor: 'orange' }} >
                    <img src={logo_image} />
                </div>
                <div id='title' style={{ width: '100%', backgroundColor: 'lime' }}>
                    Title
                </div>
                <div id='menu' style={{ width: '100%', backgroundColor: 'coral' }}>
                </div>
            </div>
            <div id='content' style={{ height: '100%', backgroundColor: 'teal' }}>
            </div>
            <div id='footer' style={{ height: '100%', backgroundColor: 'grey', textAlign: 'center', marginTop: '0.25rem', marginBottom: '0.25rem' }}>
                <img src={fb_icon_image} style={{ height: '90%', display: 'inline-block' }} />
                <img src={ig_icon_image} style={{ height: '90%', display: 'inline-block', marginLeft: '1rem', marginRight: '1rem' }} />
                <img src={yt_icon_image} style={{ height: '90%', display: 'inline-block' }} />
            </div>
        </div>
    )
}

export default Layout
TheNomadicAspie
  • 255
  • 2
  • 8
  • Does this answer your question? [overflow:hidden not working with translation in positive direction](https://stackoverflow.com/questions/16469548/overflowhidden-not-working-with-translation-in-positive-direction) – skobaljic Jan 19 '22 at 11:57
  • It is because of translation you use - just put `html, body {overflow:hidden; }`, or `body {overflow:hidden; }` – skobaljic Jan 19 '22 at 11:57
  • That worked for desktop, but when viewing on mobile I'm getting a lot of extra space even with overflow set to hidden. I think there's something wrong with the header css since that's the part that extends way too far vertically. – TheNomadicAspie Jan 19 '22 at 12:06
  • You should [check this answer](https://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers#answer-14271049). – skobaljic Jan 19 '22 at 12:10
  • Thank you, setting position to fixed corrected the problem. – TheNomadicAspie Jan 19 '22 at 12:14

0 Answers0