个人中心
gpt4 book ai didi

html - 为什么页脚不在底部？

转载 作者：太空宇宙 更新时间：2023-11-04 10:52:35 25 4
gpt4 key购买 nike

为什么页脚没有出现在服务页面的底部，这是我正在处理的页面链接 Service您可以编辑它或在我分享的代码片段中。

它正在为下面的页面工作。

注意:我不想在这里使用position:absolute 或position:fixed

body{
  background-color: #ddd;
  margin:0;
  padding: 0;
  font-family: Segoe UI;
}
ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
nav {
    background-color: #B53B27;
    width: 100%;
    z-index: 20;
}
ul.main-menu{
  text-align: center;
  align-items: center;
}
nav > ul.main-menu > li{
  display: inline;
}
nav > ul.main-menu > li > a{
  background-color: #B53B27;
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  outline: none;
}
nav > ul.main-menu > li > a:hover{
  background-color: #8F2413;
}
.sticky-nav{
  position: fixed;
  top: 0;
  z-index: 10;
}
.cover {
    background: transparent url("http://snag.gy/TKyyO.jpg") repeat scroll 0% 0%;
    width: 100%;
    height: 580px;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}
hr {
    width: 850px;
    border: 1px solid #C6C6C6;
}
.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
}
.content h1 {
    color: #BD0F0F;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.content p {
    color: #534949;
}
.registration {
    margin: 100px auto;
    width: 300px;
    text-align: center;
}
.registration h3 {
    color: #C90404;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.registration > form > input[type="text"],
.registration > form > input[type="password"]{
    width: 90%;
    margin-bottom: 15px;
  }
.registration > form > input[type="submit"]{
  background-color: #B53B27;
  color:#eee;
  cursor: pointer;
}
.registration > form > input[type="submit"]:hover{
  background-color: #8F2413;
}
input{
    display: block;
    width: 100%;
    padding: 10px 15px;
    border-style: none;
    border-radius: 5px;
}
.img-container {
    height: 500px;
    width: 500px;
    margin: 100px auto;
    border-radius: 50%;
    background: transparent url("http://snag.gy/lKbJE.jpg") repeat scroll 0% 0%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}
.img-container a {
    position: relative;
    top: 240px;
    color: #fff;
    background-color:  rgba(255, 255, 255, 0.24);
    padding: 15px 25px;
    border: 2px solid #fff;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    border-radius: 5px;
    outline: none;
}
.img-container a:hover {
  background-color: #eee;
  color: #000;
}
footer {
    background-color: #771302;
    color: #E0E0E0;
    padding: 14px 15px;
}
footer > p {
    width: 500px;
    display: inline;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Video of the week</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

</head>

<body>
<header>
    <div class="cover"></div>
    <nav id="nav-bar">
        <ul class="main-menu">
            <li><a href="#">Home</a></li>
            <li><a href="service.html">Service</a></li>
        </ul>
    </nav>
</header>
<div class="content margin-top-bottom">
    <h1>Talk of the Week</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut gravida turpis. Suspendisse in eros in porta ornare. Nunc quis vulputate ante, ac maximus ipsum. Integer sed urna sit amet tellus sollicitudin lobortis sit amet at ligula. </p>
</div>
<hr>
<div class="registration margin-top-bottom">
    <h3>Save your seat</h3>
    <form method="post" action="abc.html">
        <input type="text" placeholder="First Name">
        <input type="text" placeholder="Last Name">
        <input type="text" placeholder="Username">
        <input type="text" placeholder="E-mail">
        <input type="password" placeholder="Password">
        <input type="Submit" value="Hit-on">
    </form>
</div>
<hr>
<div class="img-container margin-top-bottom"><a href="#">Watch Now</a></div>
<div class="content margin-top-bottom">
    <h1>Talk of the Week</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut gravida turpis. Suspendisse in eros in porta ornare. Nunc quis vulputate ante, ac maximus ipsum. Integer sed urna sit amet tellus sollicitudin lobortis sit amet at ligula.</p>
</div>
<footer>
    <p>Copyright (c) 2015 Copyright Rahul Kashyap - All Rights Reserved.</p>
</footer>
</body>
</html>

这是我正在谈论的另一个页面代码片段

body{
  background-color: #ddd;
  margin:0;
  padding: 0;
  font-family: Segoe UI;
}
ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
nav {
    background-color: #B53B27;
    width: 100%;
    z-index: 20;
}
ul.main-menu{
  text-align: center;
  align-items: center;
}
nav > ul.main-menu > li{
  display: inline;
}
nav > ul.main-menu > li > a{
  background-color: #B53B27;
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  outline: none;
}
nav > ul.main-menu > li > a:hover{
  background-color: #8F2413;
}
.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
}
.content h1 {
    color: #BD0F0F;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.content p {
    color: #534949;
}
footer {
    background-color: #771302;
    color: #E0E0E0;
    padding: 14px 15px;
}
footer > p {
    width: 500px;
    display: inline;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Video of the week</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

</head>

<body>
<header>
    <nav id="nav-bar">
        <ul class="main-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="service.html">Service</a></li>
        </ul>
    </nav>
</header>
<div class="content margin-top-bottom">
    <h1>Talk of the Week</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut gravida turpis. Suspendisse in eros in porta ornare. Nunc quis vulputate ante, ac maximus ipsum. Integer sed urna sit amet tellus sollicitudin lobortis sit amet at ligula.</p>
</div>
<footer>
    <p>Copyright (c) 2015 Copyright Rahul Kashyap - All Rights Reserved.</p>
</footer>
</body>

</html>

最佳答案

如果您不想使用position: fixed 或absolute，那么calc 函数就是解决方案。

.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    min-height: calc(100vh - 290px); // calculate the height (/* IE 9+, Fx 16+, Ch 26+ */)
}

将此添加到您的 CSS 中。 react 灵敏 !!

What I have done here is just add the height of footer, header and margins ( 41px + 49px + 100px + 100px )and subtract it from the viewport height (100vh).

body{
  background-color: #ddd;
  margin:0;
  padding: 0;
  font-family: Segoe UI;
}
ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
nav {
    background-color: #B53B27;
    width: 100%;
    z-index: 20;
}
ul.main-menu{
  text-align: center;
  align-items: center;
}
nav > ul.main-menu > li{
  display: inline;
}
nav > ul.main-menu > li > a{
  background-color: #B53B27;
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  outline: none;
}
nav > ul.main-menu > li > a:hover{
  background-color: #8F2413;
}
.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    min-height: calc(100vh - 290px); // calculate the height (/* IE 9+, Fx 16+, Ch 26+ */)
}
.content h1 {
    color: #BD0F0F;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.content p {
    color: #534949;
}
footer {
    background-color: #771302;
    color: #E0E0E0;
    padding: 14px 15px;
}
footer > p {
    width: 500px;
    display: inline;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Video of the week</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

</head>

<body></body>
<header>
    <nav id="nav-bar">
        <ul class="main-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="service.html">Service</a></li>
        </ul>
    </nav>
</header>
<div class="content margin-top-bottom">
    <h1>Talk of the Week</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut gravida turpis. Suspendisse in eros in porta ornare. Nunc quis vulputate ante, ac maximus ipsum. Integer sed urna sit amet tellus sollicitudin lobortis sit amet at ligula.</p>
</div>
<footer>
    <p>Copyright (c) 2015 Copyright Rahul Kashyap - All Rights Reserved.</p>
</footer>


</html>

关于html - 为什么页脚不在底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34893074/

25 4 0
文章推荐： 没有两个条件的 CSS 选择元素
文章推荐： linux - 使用 gcc 时找不到版本 `GLIBC_2.11'
文章推荐： python - 在主目录中安装 cheetah
文章推荐： python - BadValueError : Property X must be a str or unicode instance, 不是元组(更新时，而不是创建时)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com