所以我想在我的网站上有一个页脚，但它似乎没有粘在我的关于页面的底部。具体来说，文本会显示在底部，但如果您添加背景或装饰性的东西，您会看到页脚实际上位于页面中间。
它在我的主页上运行良好，但出于某种原因在“关于”页面上运行不正常。
我在后端使用 Rails，因此页脚在布局文件中。
关于页面(页脚未粘贴)
<!DOCTYPE html>
<html>
<!-- start page -->
<div class="window main-about">
<div class="container" data-sr="flip 65deg over 2s">
<!-- content -->
<div class="row">
<div class="content col-md-12 col-centered">
<h1 class="headline"> Me in a Nutshell. </h1>
</div>
</div>
</div>
</div>
<!-- home -supporting -->
<div class="window">
<div class="container full">
<!-- row #1 -->
<div class="row">
<div class="col-md-6 ">
<h2 class="headline text-center grid-text"> Travelling. I like to do it. </h2>
</div>
<div id="abt-grid-1" class="col-md-6"></div>
</div>
<!-- row #2 -->
<div class="row">
<div id="abt-grid-2" class="col-md-6"></div>
<div class="col-md-6">
<h2 class="headline text-center grid-text"> I go to Ryerson University. </h2>
</div>
</div>
<!-- row #3 -->
<div class="row">
<div class="col-md-6 ">
<h2 class="headline text-center grid-text"> I'm also pretty awesome. </h2>
</div>
<div id="abt-grid-3" class="col-md-6"></div>
</div>
</div>
</div>
<!-- closing-supporting -->
</html>
应用程序.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Stories</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli:300,400,300italic' rel='stylesheet' type='text/css'>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<!-- menu button -->
<a id="simple-menu" href="#sidr"> <%= image_tag('https://s3.amazonaws.com/codecademy-content/projects/z2d/stories/menu-white.svg', width:'24px', alt:'Open', class:'menu-icon') %> </a>
<%= yield %>
<div id="sidr">
<!-- Your content -->
<ul>
<li> <%= link_to "Home", '/home' %> </li>
<li> <%= link_to "About", '/about' %> </li>
<li> <%= link_to "The Lab", '/#' %> </li>
<li> <%= link_to "Medium", '/blog' , :target => "_blank" %> </li>
</ul>
</div>
<div id="footer">
Satchel (c) 2015
</div>
<!-- javascript -->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
<script type ="text/javascript">
window.sr = new scrollReveal();
</script>
</body>
</html>
页面.css.scss
// Place all the styles related to the Pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
p{
color: rgb(51, 51, 51);
display: block;
font-family: Roboto, sans-serif;
font-size: 21px;
font-weight: 100;
height: 90px;
line-height: 30px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 30px;
text-align: center;}
p, h1 { margin: 0 }
.window {
height:700px;
width:100%;
//border-top: solid 1px #000; //temp test
}
.full{
width:100%;
}
.main-home {
background: url('http://i58.tinypic.com/2v34yub.jpg') no-repeat center center;
background-size:cover;
}
.main-about {
background: url('https://static.pexels.com/photos/1440/city-road-street-buildings.jpg') no-repeat center center;
background-size:cover;
}
.secondary-home {
background:url('http://theabf.org/sites/default/files/nocredityosemite.jpg') no-repeat center center;
background-size:cover;
height:500px;
}
.window-support {
padding: 80px 0;
text-align: center;
}
.content {
top:225px;
position:relative;
text-align: center;
color: white;
}
h1.headline {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 50px;
}
h2.headline {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 35px;
}
.btn.sharp {
border-radius:0;
border:none;
font-size: 14px;
}
.menu-icon {
top:30px;
left:30px;
position:absolute;
margin: 0;
}
.col-centered{
float: none;
margin: 0 auto;
}
.halfBack {
width: 50%;
position:absolute;
height:500px;
}
.grid-text {
padding-top:205px;
}
#abt-grid-3 {
background: url('https://paulkporterphotography.files.wordpress.com/2015/04/20141210-distillery-31.jpg') no-repeat center center;
height:500px;
background-size:cover;
}
#abt-grid-1{
background:url('https://i0.wp.com/upload.wikimedia.org/wikipedia/commons/1/14/1_yonge_street_toronto_winter_2010_panorama.jpg') no-repeat center center;
height:500px;
background-size:cover;
}
#abt-grid-2{
background: url('http://ryersonbuilds.ryerson.ca/wp-content/uploads/2013/12/X6C61871.jpg') no-repeat center center;
height:500px;
background-size:cover;
}
#grid-long {
background: url('https://ksulkski.files.wordpress.com/2011/11/istock_000000734318toronto_large.jpg') no-repeat center center;
background-size: cover;
height:500px;
}
.footer {
background-color: #f9f9f9;
border-top: solid 1px #F5F5F5;
padding: 40px 0 30px 0;
text-align: center;
color: #ccc;
}
最佳答案
如果我理解你想要的是正确的，那么你应该只使用 css fixed 属性。尝试类似的东西。
.myFooter {
position: fixed;
bottom: 0px;
}
这会将您应用此类的任何标记保留在 View 底部。
关于html - 页脚未正确粘贴在布局文件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32555090/