加载页面后,页脚未出现在正确的位置。它似乎加载在浏览器的底部(如果页面上的内容过多,我希望它越过浏览器底部到达页面底部),但是当您滚动查看其余内容时,它会保持不变放置在覆盖内容的页面上(不要停留在浏览器底部)。我已经设置了position: absolute;
和bottom: 0;
,但它们似乎没有按预期工作。
HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects</title>
<link rel="stylesheet" href="Style/style.css">
</head>
<body>
<header>
<nav class="row">
<a class="mobileNav"></a>
<ul class="col offset-desktop-7 desktop-5 offset-tablet-6 tablet-6 mobile-12">
<li class="col desktop-4 tablet-4"><a href="index.html">Home</a></li>
<li class="col desktop-4 tablet-4"><a href="portfolio.html">Projects</a></li>
<li class="col desktop-4 tablet-4"><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section class="col desktop-12 tablet-12 mobile-12">
<h1>Lewis Blundell</h1>
<h2>Junior Web Developer</h2>
<h3>HTML5 | CSS3 | JavaScript | PHP | MYSQL</h3>
</section>
</header>
<section class="wrapper">
<h1 class="col desktop-12 tablet-12 mobile-12">Projects</h1>
<article class="row">
<aside class="col desktop-3">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
</aside>
<div class="col desktop-6">
<p>hello</p>
</div>
<aside class="col desktop-3">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
</aside>
</article>
</section>
<footer class="row">
<p class="col desktop-12 tablet-12 mobile-12"> Lewis Blundell © 2017</p>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="Script/script.js"></script>
</html>
SASS:
/* --- Variables --- */
$columnAmount : 12; /* This is used to set the amount of columns that will be used for a responsive grid layout */
$green : #3E9633; /* Main green background colour used throughout site */
$white : #FFFFFF;
$grey : #444444;
/* --- General Styling --- */
aside{
img{
width: 75%;
margin-botom: 20px;
}
}
html{
height: 100%;
}
.wrapper{
padding-left: 10px;
padding-right: 10px;
padding-bottom:40px;
}
body{
padding-bottom:50px;
position: relative;
background-color: $grey;
color: $white;
text-align: center;
margin: 0;
h1{
text-align: center;
color: $white;
font-size: 3rem;
text-decoration: underline;
}
}
header{
color: $white;
overflow: hidden;
background-color: $green;
nav{
.mobileNav{
display: block;
width: 100%;
height: 40px;
background: url(../Images/burger.png) no-repeat 98% center;
cursor:pointer;
}
overflow:hidden;
ul{
list-style-type: none;
margin: 0;
padding: 0;
li{
display: inline-block;
padding: 14px 16px;
text-align: center;
font-size: 150%;
&:hover{
background-color: $grey;
}
a{
color: $white;
text-decoration: none;
}
}
}
}
h1{
font-size: 5rem;
text-align: center;
margin-bottom: 0px;
text-decoration: none;
}
h2{
font-size: 3rem;
text-align: center;
margin-top: 0px;
}
h3{
font-size: 2rem;
text-align: center;
}
}
footer{
display: inline-block;
position: absolute;
left:0;
bottom: 0;
width:100%;
height: 50px;
background-color: $green;
}
/* --- Media Queries and General Layout--- */
.row{
clear:both;
width:100%;
}
.col{
display:block;
float:left;
box-sizing: border-box;
max-height:auto;
}
@media screen and (max-width:480px){ /* Styling for mobile viewports */
@for $i from 1 through $columnAmount{
.mobile-#{$i}{
width: 100% / $columnAmount * $i;
}
.offset-mobile-#{$i}{
margin-left: 100% / $columnAmount * $i;
}
}
header{
nav{
ul{
background-color: $grey;
height: 0;
li{
float:none;
text-align: left;
width: 100%;
margin: 0;
a{
padding: 10px;
border-bottom: 1px solid $white;
display: block;
margin: 0;
}
}
}
}
}
header nav ul.open{
height: auto;
}
}
@media screen and (min-width:481px) and (max-width:800px){ /* Styling for tablet viewports */
@for $i from 1 through $columnAmount{
.tablet-#{$i}{
width: 100% / $columnAmount * $i;
}
.offset-tablet-#{$i}{
margin-left: 100% / $columnAmount * $i;
}
}
header nav a.mobileNav{
display:none;
}
}
@media screen and (min-width:801px){ /* Styling for desktop viewports */
@for $i from 1 through $columnAmount{
.desktop-#{$i}{
width: 100% / $columnAmount * $i;
}
.offset-desktop-#{$i}{
margin-left: 100% / $columnAmount * $i;
}
}
header nav a.mobileNav{
display:none;
}
}
网站使用的图片:
最佳答案
尝试固定位置
position:fixed;
bottom:0;
如果您想位于浏览器页面的底部,如果您的内容高度小于窗口浏览器,如果大于,则应位于内容的底部,您可以尝试此操作
body{
position: relative;
}
footer{
bottom:0;
}
并为此使用此javascript代码
$(document).resize(function() {
var bh = $("body").height();
browser_height = window.innerHeight;
if(bh<browser_height)
$("footer").css("position","fixed");
else
$("footer").css("position","absloute");
})