CODEWITHSUNDEEP
htmlcss
Drew
Drew

Reputation: 97

Div Height Increases when Browser Window is Shrunk

When I shrink the size of my browser window to half of my screen, the main_container div's height increases and you have to scroll far to get to the footer.

I don't want this to happen. I tried using max-height but it made the div disappear.

Can anyone help me please? Thanks

HTML Code:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8" />
        <link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
        <title>Aduro Pictures</title>
    </head>
    <body>
        <header>
            <div id="logo_home">
                <a href="index.html" title="Home"><img id="logo" src="images/logo.jpg" alt="logo"></a>
            </div>
            <nav>
                <ul>
                    <li><a class="nav_link" id="about" href="about.html" title="About">About</a></li>
                    <li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a></li>
                    <li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a></li>
                    <li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a></li>
                    <li><a class="nav_link" id="links" href="links.html" title="Links">Links</a></li>
                    <li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a></li>
                </ul>
            </nav>
        </header>
        <div id="main_wrapper">
            <div id="video_container">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
            </div>
            <div id="image_container">
                <div id="gradient"></div>
            </div>
            <div id="main_container"></div>
        </div>
        <footer>
            <p class="copyright">Copyright &copy; 2016.</p>
        </footer>
    </body>
</html>

CSS Code:

body {
    margin: 0px;
    font-size: 62.5%;
    padding: 0px;
    }

header {
    width: 100%;
    height: 90px;
    background-color: #000000;
    }

#logo_home {
    position: relative;
    float: left;
    left: 5%;
    width: 20%;
    top: 7.5px;
    }

#logo {
    height: 75px;
    width: 300px;
    }

nav {
    position: relative;
    float: right;
    right: 5%;
    width: 35%;
    height: 50px;
    top: 20px;
    }

ul {
    margin-top: 0px;
    margin-bottom: 0px;
    position: relative;
    top: 17.5px;
    }

li {
    display: inline-block;
    margin-left: 2.5%;
    margin-right: 2.5%;
    position: relative;
    list-style-type: none;
    padding-top: 0px;
    }

.nav_link {
    font-family: 'PT-Sans', sans-serif;
    color: #FFFFFF;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
    }

.nav_link:link {
    color: #ffffff;
    }

.nav_link:visited {
    color: #ffffff;
    }

.nav_link:hover {
    color: #dddddd;
    }

#main_wrapper {
    height: 1500px;
    width: 100%;
}

#video_container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
    z-index: 5;

}

#video_container iframe, #video_container object, #video_container embed {
    position: absolute;
    top: 100px;
    left: 17.5%;
    width: 65%;
    height: 65%;
    box-sizing: border-box;
}

#image_container {
    position: absolute; 
    top: 90px; 
    left: 0px; 
    width: 100%; 
    height: 580px; /*pic ain't 580px in height*/
    background: url('../images/background5.jpg') no-repeat;
}

#gradient {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 580px;
    background: transparent linear-gradient(to bottom, rgba(29, 29, 29, 0.65) 0px, #1D1D1D 100%) repeat scroll 0% 0%; 
}

#main_container {
    background-color: #1d1d1d;
    background-repeat: no-repeat;
    height: 920px;
    position: absolute;
    width: 100%;
    top: 670px;

}

footer {
    background-color: #000000;
    height: 50px;
    width: 100%;
    margin: 0px;
    top: 0px;
    position: relative;

    }

.copyright {
    color: white;
    font-family: 'PT-Sans', sans-serif;
    font-size: 1.2em;
    position: relative;
    text-align: center;
    top: 15px;
    margin: 0px;
    padding: 0px;
    }

Thanks!

Upvotes: 2

Views: 594

Answers (1)

KitakamiKyle
KitakamiKyle

Reputation: 85

In your css, you have a height of 920px. I have a feeling the size of the div is not increasing....simply your window is smaller, but your div is still 920px, so you have to scroll down to see the whole div area.

If you are wanting that div area to stay completely visible in the window, you might try this.

Instead of fixing the height to 920px. remove that. Make the div height 100%. Then set your top-margin and bottom-margin to a reasonable number such as 3em so that it fits comfortably in the window area. You may have to do the same thing with the left and right side if you have them set to fixed sizes.

If the window is shrunk down too small, you might also want to set your div to a min-height so that it doesn't get all funky looking.

Don't know for sure if this is what you're trying to achieve, but I hope this helps.

Upvotes: 1

Related Questions