1. 首页
  2. 问答
  3. 如何让网站伸展到屏幕底部

如何让网站伸展到屏幕底部

2016-06-07 71 views
1

我知道我在这里失去了一些东西...... 我已经制作了这个页面，但是我无法使它伸展整页。这是当前的实时版本。 div site如何让网站伸展到屏幕底部

我想要它做的不仅是符合页面的宽度（它所做的），但我也想要符合页面的高度。

我不想有使网站坚持到一定的高度，我不认为这是好的做法，这些天。正确？ 这里是CSS代码：

.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; 
    } 
}

这里是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>

来源

2016-06-07 Tyrii

+0

为此，你需要的JavaScript。 – Krii

回答

4

没有JS。你有几个选择。我会推荐设置

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

您的body现在占据屏幕高度的100％。然后你需要调整你的图像，并删除指定的高度，你已经设置了650px

我是使用vh的粉丝。您可以将图像容器设置为100vh。它会将它们设置为视口高度的100％。这取决于您的浏览器限制。 http://caniuse.com/#feat=viewport-units

我也建议编辑你的#footer样式与这些规则。

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

当您将图像拉伸到视口高度的100％后，您会注意到页脚看起来有点奇怪。这应该为你解决这个问题。 enter image description here

来源

2016-06-07 14:17:57 EnigmaRM

+0

@Tririi好看的网站btw – EnigmaRM

+0

@ EnigmaRM谢谢！所有固定！ – Tyrii

0

您需要JavaScript。

  1. 获取视口高度。 var veiwportY = window.innerHeight;

  2. 将div高度设置为视口高度。 myDiv.style.height = veiwportY;

  3. 请注意，这是一个例子。

More on the height

来源

2016-06-07 14:26:16 Krii

相关问题

 相关问题