如何使网站延伸到屏幕的底部
我知道我在这里遗失了一些东西...... 我已经制作了这个页面，但我不能让它延伸到整页。这是目前的实时版本。 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">
© Copyright 2016. All Rights Reserved. | Design By: <a id="textspan1" href="#" target="_blank">Cyndee Adkins Design</a><br />
</p>
</div>
</div>
</body>
</html>
2 个答案:
答案 0 :(得分：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％后，您会注意到页脚看起来有点奇怪。这应该为你解决。
答案 1 :(得分：0)
你需要JavaScript。
-
获取视口高度。
var veiwportY = window.innerHeight; -
将div高度设置为视口高度。
myDiv.style.height = veiwportY; -
请注意，这是一个例子。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？