Tyrii Tyrii - 5 months ago 10
HTML Question

How to make website stretch to bottom of screen

I know I am missing something here...
I've made this page but I can't get it to stretch full page. Here is the live version currently.
div site

What I want it to do is not only conform to the width of the page (which it does) but I also want to to conform to the height of the page.

I don't want to have to make the website stick to a certain height, I don't think that is good practice these days. Correct?
Here is the css code:

.primaryContainer {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 100%;
position: relative;
min-width: 0;
max-width: none;
}
#partycontainerforbgimages {
float: left;
height: 100%;
margin-left: 0;
margin-top: -45px;
clear: none;
width: 100%;
min-width: 0;
position: relative;
display: block;
min-height: 0;
}
#paintpartyimgcontainer {
float: none;
height: 650px;
clear: none;
width: 59.99976%;
position: absolute;
top: 0;
left: 40.265253%;
z-index: 0;
display: block;
min-height: 0;
background-image: url(img/glowparty_hover.png);
background-attachment: scroll;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
#_5kimgcontainer {
float: left;
height: 650px;
clear: none;
width: 60%;
position: absolute;
z-index: 8;
border-right-color: rgba(0, 0, 0, 0.952941);
border-right-width: 14px;
border-right-style: solid;
display: block;
min-height: 0;
background-image: url(img/5kimg_hover.jpg);
background-attachment: scroll;
-webkit-background-size: cover;
background-size: cover;
min-width: 0;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
#_5kimgcontainer:hover {
display: block;
opacity: 1;
background-image: url(img/5kimg.jpg);
background-attachment: scroll;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
}
#paintpartyimgcontainer:hover {
background-image: url(img/glowparty.png);
background-attachment: scroll;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
}
#_5k_container {
float: left;
height: 100%;
clear: none;
width: 50%;
min-width: 0;
position: absolute;
top: 0;
left: 0;
display: block;
min-height: 0;
}
#paintparty_container {
float: left;
height: 100%;
clear: none;
width: 50%;
min-width: 0;
position: absolute;
top: 0;
left: 50%;
display: block;
min-height: 0;
}
#_5k {
float: left;
width: 242.5px;
max-width: 252.5px;
height: 253px;
margin-left: 25.227476%;
margin-top: -165.75px;
clear: none;
color: #000;
position: relative;
top: 0;
left: 0;
min-width: 242.5px;
min-height: 253px;
padding-right: 0;
margin-right: 30px;
max-height: 253px;
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
#paintparty {
float: left;
width: 220.515625px;
max-width: 316.11px;
height: 217px;
margin-left: 40.928819%;
margin-top: 232px;
clear: none;
color: #000;
position: relative;
top: 0;
left: 0;
min-width: 220.52px;
min-height: 217px;
max-height: 310px;
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
#pickyourpartybox {
float: none;
height: 117px;
clear: none;
width: 180px;
position: relative;
top: 0;
left: 0;
z-index: 16;
border: 5px solid #efeeee;
border-top-left-radius: 17px;
border-top-right-radius: 17px;
border-bottom-right-radius: 17px;
border-bottom-left-radius: 17px;
-webkit-box-shadow: rgba(0, 0, 0, 0.309804) 0 0 7px 3px;
box-shadow: rgba(0, 0, 0, 0.309804) 0 0 7px 3px;
margin-top: 258px;
margin-left: 87.653061%;
background-color: rgba(0, 0, 0, 0.560784);
margin-right: 30px;
}
#logo_overlay_grouping {
float: left;
height: 100%;
clear: none;
width: 100%;
position: relative;
top: 0;
left: 0;
z-index: 26;
display: block;
min-height: 0;
overflow: visible;
margin-top: -45px;
margin-left: 0;
}
#pickyourpartytext {
float: none;
font-size: 2em;
width: 62.115127%;
height: auto;
text-align: center;
font-weight: 400;
line-height: 1em;
margin: 23px auto 0;
clear: none;
min-height: 78px;
font-family: helvetica;
text-transform: uppercase;
color: #efeeee;
}
#header {
float: none;
height: 45px;
clear: none;
width: 100%;
min-width: 0;
position: relative;
border-bottom-color: rgba(0, 0, 0, 0.843137);
border-bottom-width: 6px;
border-bottom-style: solid;
display: block;
background-color: rgba(0, 0, 0, 0.843137);
top: 0;
left: 0;
z-index: 10;
-webkit-box-shadow: rgba(0, 0, 0, 0.843137) 0 3px 3px 0;
box-shadow: rgba(0, 0, 0, 0.843137) 0 3px 3px 0;
}
#headernav {
float: none;
height: 30px;
margin: 0 auto;
clear: none;
width: 545px;
padding: 15px 0;
position: static;
top: 0;
left: 0;
}
#facebooklink {
float: left;
font-size: 1em;
width: auto;
height: auto;
text-align: left;
font-weight: 400;
line-height: .3em;
margin-left: .00390625%;
margin-top: 0;
clear: none;
min-height: 0;
margin-right: 0;
color: #ec89ee;
font-family: helvetica;
display: block;
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
#twitterlink {
float: left;
font-size: 1em;
width: auto;
height: auto;
text-align: left;
font-weight: 400;
line-height: .3em;
margin-left: 24.009454%;
margin-top: 0;
clear: none;
min-height: 0;
display: block;
margin-right: 0;
color: #4bd3ef;
font-family: helvetica;
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
#instagramlink {
float: left;
font-size: 1em;
width: auto;
height: auto;
text-align: left;
font-weight: 400;
line-height: .3em;
margin-left: 24.009454%;
margin-top: 0;
clear: none;
min-height: 0;
display: block;
margin-right: 0;
color: #7fee81;
font-family: helvetica;
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
#footer {
float: left;
height: 45px;
clear: none;
width: 100%;
background-color: rgba(0, 0, 0, 0.843137);
-webkit-box-shadow: rgba(0, 0, 0, 0.843137) 0 -3px 3px 0;
box-shadow: rgba(0, 0, 0, 0.843137) 0 -3px 3px 0;
position: fixed;
top: 94%;
left: 0;
z-index: 15;
overflow: scroll;
right: auto;
bottom: auto;
}
#footer_text {
float: none;
font-size: .5em;
width: 38.45%;
height: auto;
text-align: center;
font-weight: 400;
line-height: .5em;
margin-left: auto;
margin-top: 0;
clear: none;
min-height: 100%;
font-family: helvetica;
color: #efeeee;
padding-top: 11px;
margin-right: auto;
}
#textspan {
float: none;
font-size: .6em;
line-height: 1em;
font-weight: 300;
}
#_5k:hover {
width: 252.5px;
min-width: 0;
display: block;
min-height: 263px;
height: 263px;
max-width: 252.5px;
max-height: 263px;
}
#paintparty:hover {
width: 224.515625px;
min-width: 224.52px;
display: block;
height: 221px;
min-height: 221px;
max-width: 224.52px;
max-height: 221px;
}
#textspan1 {
float: none;
font-size: 1em;
line-height: 1em;
}
#facebooklink:hover {
color: rgba(236, 137, 238, 0.74902);
}
#twitterlink:hover {
color: rgba(75, 211, 239, 0.74902);
}
#instagramlink:hover {
color: rgba(127, 238, 129, 0.74902);
}
@media only screen and (max-width: 750px) {
#_5kimgcontainer {
width: 100%;
position: static;
top: 0;
left: 0;
display: none;
}
#paintpartyimgcontainer {
width: 100%;
position: static;
top: 0;
left: 0;
margin-top: 0;
margin-left: 40.264583%;
clear: none;
display: none;
}
#pickyourpartybox {
display: none;
}
#_5k_container {
width: 100%;
position: static;
top: 0;
left: 0;
margin-top: -7px;
margin-left: auto;
clear: none;
margin-right: auto;
float: none;
height: 107.54818%;
background-image: url(img/5kimg_hover.jpg);
background-attachment: scroll;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-repeat: repeat repeat;
border-bottom: 10px solid #000;
-webkit-box-shadow: 0 10px 5px -8px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0 10px 5px -8px rgba(0, 0, 0, 0.75);
box-shadow: 0 10px 5px 17px rgba(0, 0, 0, 0.75);
}
#paintparty_container {
width: 100%;
position: static;
top: 0;
left: 0;
margin-top: 0;
margin-left: auto;
clear: none;
margin-right: auto;
float: none;
height: 100%;
background-image: url(img/glowparty_hover.png);
background-attachment: scroll;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
-webkit-box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.75);
box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.75);
}
#_5k {
margin: 100px auto 57px;
float: none;
clear: none;
}
#paintparty {
margin: 100px auto 57px;
float: none;
clear: none;
}
#pickyourpartytext {
width: 0;
}
#logo_overlay_grouping {
position: static;
top: 0;
left: 0;
width: 100%;
}
#_5k_container:hover {
background-image: url(img/5kimg.jpg);
background-attachment: scroll;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
}
#footer {
width: 100%;
clear: both;
bottom: auto;
top: 96.3%;
}
#partycontainerforbgimages {
margin-top: 0;
}
#footer_text {
margin-top: 0;
clear: none;
line-height: 1em;
width: 77.45%;
font-size: .4em;
}
#paintparty_container:hover {
background-image: url(img/glowparty.png);
background-attachment: scroll;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
}
#textspan1 {
line-height: 1em;
font-size: 1em;
}
}
@media only screen and (max-width: 650px) {
#twitterlink {
margin-left: 15%;
}
#instagramlink {
margin-left: 15%;
}
#headernav {
width: 400px;
}
}
@media only screen and (max-width: 433px) {
#twitterlink {
margin-left: 15%;
}
#instagramlink {
margin-left: 15%;
}
#headernav {
width: 272px;
}
}


And here is the HTML:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="boilerplate.css">
<link rel="stylesheet" href="page.css">
<script src="https://use.fontawesome.com/0847995977.js"></script>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>
<body>

<div id="primaryContainer" class="primaryContainer clearfix">
<div id="header" class="clearfix">
<div id="headernav" class="clearfix">
<a id="facebooklink" href="https://www.facebook.com/colormycollege5K" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</a>
<a id="twitterlink" href="https://twitter.com/colormycollege" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i> Twitter</a>
<a id="instagramlink" href="https://www.instagram.com/colormycollege/" target="_blank"> <i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a>
</div>
</div>
<div id="logo_overlay_grouping" class="clearfix">
<div id="_5k_container" class="clearfix">
<div id="pickyourpartybox" class="clearfix">
<p id="pickyourpartytext">
<span id="textspan">PICK YOUR</span><br />PARTY
</p>
</div>
<a href="http://www.5k.colormycollege.com/">
<img id="_5k" src="img/logo_5k.png" class="image" />
</a>
</div>
<div id="paintparty_container" class="clearfix">
<a href="http://www.paintparty.colormycollege.com/">
<img id="paintparty" src="img/Logo_paint.png" class="image" />
</a>
</div>
</div>
<div id="partycontainerforbgimages" class="clearfix">
<div id="_5kimgcontainer" class="clearfix">
</div>
<div id="paintpartyimgcontainer" class="clearfix">
</div>
</div>
<div id="footer" class="clearfix">
<p id="footer_text">
&copy; Copyright 2016. All Rights Reserved. &#x7c; Design By&#x3a; <a id="textspan1" href="#" target="_blank">Cyndee Adkins Design</a><br />
</p>
</div>
</div>
</body>
</html>

Answer

No JS is needed for this. You have a few options. I'd recommend setting

html, body {
  height: 100%;
}
body {
  min-height: 100%;
}

Your body is now taking 100% of screen height. Then you'll need to adjust your images and remove the specified height you have set of 650px

I'm a fan of using vh. You could set your image containers to be 100vh. It'll set them to be 100% of viewport height. It just depends on what your browser limitations are. http://caniuse.com/#feat=viewport-units

I would also recommend editing your #footer styling with these rules.

#footer {
    bottom: 0px;
    overflow: auto;
    //top: 94%;
}

After you stretch your images to 100% of viewport height, you'll notice that footer looks a bit odd. This should fix that for you. enter image description here

Comments