Question

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

它适用于以下页面。

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

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

如果您不想使用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中添加它。 响应迅速 !!

我在这里做的只是添加页脚，标题和页面的高度边距（41px + 49px + 100px + 100px）并从viewport高度（100vh）中减去。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

您应该使用Private Sub BOL_BeforeUpdate(Cancel As Integer) 'https://stackoverflow.com/questions/14608052/prevent-duplicate-records-query-before-creating-new-records Set rst = Me.RecordsetClone rst.FindFirst "[ShipmentNumber] <> " & Me.ShipmentNumber & " AND [BOL] = " & Me.BOL If Not rst.NoMatch Then Cancel = True If MsgBox("BOL already exists; goto existing record?", vbYesNo) = vbYes Then Me.Undo DoCmd.SearchForRecord , , acFirst, "[ShipmentNumber] = " & rst("ShipmentNumber") End If End If rst.Close End Sub或position:absolute因为内容高度不足以填满屏幕。

我希望pen会帮助你。（不是我的）

编辑：

我忘了css position:fixed你可以在没有calc

的情况下做到这一点

position:absolute|fixed

Answer 3

为什么不在标签中写下你的内容???? 这是你的代码尝试写一个

.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    height: calc(100% - 41px - 49px - 200px);
    /* page height - header height - footer height(include margin) - content height(exclude margin) */
}

Answer 4

将min-height应用于内容是一种解决方案。但是，通过css文件应用这个最小高度并不可取，因为我们必须考虑各种各样的屏幕尺寸。所以使用jquery，我们可以找到窗口的高度。然后

内容部分的最小高度=窗口高度 - （'标题高度'+'页脚高度'+内容的顶部和底部边距）

将此值作为min-height注入具有“content”类的div。

为什么页脚没有进入底部？

4 个答案: