如何在只有标头的网站上添加页脚类型文本？
Posted
技术标签:
【中文标题】如何在只有标头的网站上添加页脚类型文本？【英文标题】：How to add a footer-type-text on a masthead-only site? 【发布时间】：2018-12-26 11:41:11 【问题描述】：如何在只有标头的网站上添加页脚类型的文字（包括版权免责声明的文字）？每次我添加一个页脚，该页脚堆叠在标头之外，使屏幕可滚动。目的是获得包含在标头中的版权（和隐私条款的链接）（最终目标的图片附在下面）。
我已经通过附加的图片展示了我的进度。
目的是根据屏幕尺寸不同地显示版权行：
对于桌面：添加到与新闻通讯表单下方对齐的左下角（参见附图） 对于移动设备：位于社交徽标下方（见附图）关于我到目前为止的进展：以下是我设法实施的内容。任何指针将不胜感激！
这些是桌面和移动设备上的当前视图：
当前桌面：desktop 当前手机：mobile这是我想要实现的：
要在桌面上：what I want to implement on desktop 手机：what I want to implement on mobile - ignore the blue ugly background behind the copyrighthtml：
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>X</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/coming-soon.min.css" rel="stylesheet">
</head>
<body>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="mp4/bg.mp4" type="video/mp4">
</video>
<div class="masthead">
<div class="masthead-bg"></div>
<div class="container h-100">
<div class="row h-100">
<div class="col-12 my-auto">
<div class="masthead-content text-white py-5 py-md-0">
<h1 class="mb-3">Register</h1>
<p class="mb-5">Building a X.
We're building X for you. <strong>Request an invitation for early access using the form below!</strong></p>
<div class="input-group input-group-newsletter">
<input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" class="form-control" placeholder="Enter email..." aria-label="Enter email..." aria-describedby="basic-addon">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">Notify Me!
</button>
</div
</div>
</div>
<p class="footer-text">© 2018 X Ltd. All Rights Reserved</p>
</div>
</div>
</div>
</div>
<div class="social-icons">
<ul class="list-unstyled text-center mb-0">
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-medium"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
</ul>
</div>
<!-- Bootstrap core javascript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/coming-soon.min.js"></script>
</body>
</html>
html
height: 100%
h1,
h2,
h3,
h4,
h5,
h6
font-family: Merriweather;
font-weight: 700
body
height: 100%;
min-height: 35rem;
position: relative;
font-family: 'Source Sans Pro';
font-weight: 300
video
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
z-index: 0
@media (pointer:coarse) and (hover:none)
body
background: url(../img/bg-mobile-fallback.jpg) #002e66 no-repeat center center scroll;
background-position: cover
body video
display: none
.overlay
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #cd9557;
opacity: .7;
z-index: 1
.masthead
position: relative;
overflow: hidden;
padding-bottom: 3rem;
z-index: 2
.masthead .masthead-bg
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
min-height: 35rem;
height: 100%;
background-color: rgba(0, 46, 102, .8);
transform: skewY(4deg);
transform-origin: bottom right
.masthead .masthead-content h1
font-size: 2.5rem
.masthead .masthead-content p
font-size: 1.2rem
.masthead .masthead-content p strong
font-weight: 700
.masthead .masthead-content .input-group-newsletter input
font-size: 1rem;
padding: 1rem
.masthead .masthead-content .input-group-newsletter button
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1rem
@media (min-width:768px)
.masthead
height: 100%;
min-height: 0;
width: 40.5rem;
padding-bottom: 0
.masthead .masthead-bg
min-height: 0;
transform: skewX(-8deg);
transform-origin: top right
.masthead .masthead-content
padding-left: 3rem;
padding-right: 10rem
.masthead .masthead-content h1
font-size: 3.5rem
.masthead .masthead-content p
font-size: 1.3rem
.social-icons
position: absolute;
margin-bottom: 2rem;
width: 100%;
z-index: 2
.social-icons ul
margin-top: 2rem;
width: 100%;
text-align: center
.social-icons ul>li
margin-left: .75rem;
margin-right: .75rem;
display: inline-block
.social-icons ul>li>a
display: block;
color: #fff;
background-color: rgba(0, 46, 102, .8);
border-radius: 100%;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
@media (min-width:768px)
.social-icons
margin: 0;
position: absolute;
right: 2.5rem;
bottom: 2rem;
width: auto
.social-icons ul
margin-top: 0;
width: auto
.social-icons ul>li
display: block;
margin-left: 0;
margin-right: 0;
margin-bottom: 2rem
.social-icons ul>li:last-child
margin-bottom: 0
.social-icons ul>li>a
transition: all .2s ease-in-out;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
.social-icons ul>li>a:hover
background-color: #002e66
.btn-secondary
background-color: #cd9557;
border-color: #cd9557
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover
background-color: #ba7c37!important;
border-color: #ba7c37!important
.input
font-weight: 300!important
.footer-text
padding: 10px;
color: #fff
CSS：
html
height: 100%
h1,
h2,
h3,
h4,
h5,
h6
font-family: Merriweather;
font-weight: 700
body
height: 100%;
min-height: 35rem;
position: relative;
font-family: 'Source Sans Pro';
font-weight: 300
video
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
z-index: 0
@media (pointer:coarse) and (hover:none)
body
background: url(../img/bg-mobile-fallback.jpg) #002e66 no-repeat center center scroll;
background-position: cover
body video
display: none
.overlay
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #cd9557;
opacity: .7;
z-index: 1
.masthead
position: relative;
overflow: hidden;
padding-bottom: 3rem;
z-index: 2
.masthead .masthead-bg
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
min-height: 35rem;
height: 100%;
background-color: rgba(0, 46, 102, .8);
transform: skewY(4deg);
transform-origin: bottom right
.masthead .masthead-content h1
font-size: 2.5rem
.masthead .masthead-content p
font-size: 1.2rem
.masthead .masthead-content p strong
font-weight: 700
.masthead .masthead-content .input-group-newsletter input
font-size: 1rem;
padding: 1rem
.masthead .masthead-content .input-group-newsletter button
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1rem
@media (min-width:768px)
.masthead
height: 100%;
min-height: 0;
width: 40.5rem;
padding-bottom: 0
.masthead .masthead-bg
min-height: 0;
transform: skewX(-8deg);
transform-origin: top right
.masthead .masthead-content
padding-left: 3rem;
padding-right: 10rem
.masthead .masthead-content h1
font-size: 3.5rem
.masthead .masthead-content p
font-size: 1.3rem
.social-icons
position: absolute;
margin-bottom: 2rem;
width: 100%;
z-index: 2
.social-icons ul
margin-top: 2rem;
width: 100%;
text-align: center
.social-icons ul>li
margin-left: .75rem;
margin-right: .75rem;
display: inline-block
.social-icons ul>li>a
display: block;
color: #fff;
background-color: rgba(0, 46, 102, .8);
border-radius: 100%;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
@media (min-width:768px)
.social-icons
margin: 0;
position: absolute;
right: 2.5rem;
bottom: 2rem;
width: auto
.social-icons ul
margin-top: 0;
width: auto
.social-icons ul>li
display: block;
margin-left: 0;
margin-right: 0;
margin-bottom: 2rem
.social-icons ul>li:last-child
margin-bottom: 0
.social-icons ul>li>a
transition: all .2s ease-in-out;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
.social-icons ul>li>a:hover
background-color: #002e66
.btn-secondary
background-color: #cd9557;
border-color: #cd9557
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover
background-color: #ba7c37!important;
border-color: #ba7c37!important
.input
font-weight: 300!important
.footer-text
padding: 10px;
color: #fff
【问题讨论】：
【参考方案1】：对于遇到此问题的其他人：
使用 Bootstrap 的“mastfoot”。
具体来说，在标头 div 之外创建以下 div：
<div class="mastfoot">
<div class="inner-mastfoot">
© 2018 X Ltd. All Rights Reserved. • <a href="/legal">Legal</a> • <a href="/contact">Contact</a>
</div>
</div>
然后定义“mastfoot”和“inner-mastfoot”样式如下：
对于移动端视图：
.mastfoot
color: #262626;
color: rgba(26, 26, 26, .5);
position: absolute;
bottom: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
z-index: 2
.inner-mastfoot
font-size: 0.8rem;
text-align: center
对于桌面视图：
@media (min-width:768px)
.mastfoot
color: #999 !important;
color: rgba(255, 255, 255, .5) !important;
position: absolute !important;
bottom: 10px !important;
margin-left: 4rem !important;
margin-right: 10rem !important;
z-index: 2
.inner-mastfoot
font-size: 0.8rem;
text-align: left !important
【讨论】：
以上是关于如何在只有标头的网站上添加页脚类型文本？的主要内容，如果未能解决你的问题，请参考以下文章