Question

下面是我的html代码（现场演示http://..。）但是页脚不在页面的最底部，页脚后面有一个间隙。我该如何解决？我需要在css / html中进行哪些更改？我正在使用bootstrap 4。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cart</title>
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Language" content="en-us">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/1061ab0407.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<style type="text/css" media="screen">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

.navbar {margin-bottom: 20px;}

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

.table.no-border tr td, .table.no-border tr th {
  border-width: 0;
}
</style>
</head>
<body>
<div id="wrap">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item active dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>

    </ul>
  </div>
</nav>

<div class="container-fluid">
<!-- header -->

     <div class="row">
           <div class="col-md-8">
                   <div class="card bg-light mb-3">
                           <table class="table">
                                       <thead>
                                                   <tr>
                                                         <th>Product</th>
                                                          <th>Price</th>
                                                          <th>Quantity</th>
                                                    </tr>
                                       </thead>
                                       <tbody>
                                                                                                                                <tr>
                                                   <td>blah1</td>
                                                   <td>$12.10</td>
                                                   <td>
                                                          <form action="/new/cart/100" method="post" class="form-inline">
                                                              <input type="text" name="quantity" value="1" size="6" class="form-control input-sm">
                                                              <input type="hidden" name="item" value="2">
                                                              <input type="submit" value="Update" class="btn btn-primary btn-sm"> <input type="submit" name="remove" value="Remove" class="btn btn-danger btn-sm">
                                                           </form>
                                                   </td>
                                            </tr>

                                                                                                                         </tbody>
                           </table>
                   </div>
           </div>

           <div class="col-md-4">
                   <div class="card bg-light mb-3">
                   <h4 class="card-title">Cart summary</h4>
                   <ul class="list-group list-group-flush">

                 <li class="list-group-item">Total</li>
                 <li class="list-group-item">$17.60</li>

 <li class="list-group-item">Coupon
<form action="/new/cart/100" method="post" class="form-inline">
<input type="text" name="coupon" value="" size="10" class="form-control input-sm">
<input type="submit" value="Update" class="btn btn-primary btn-sm">
</form></li>

                   </ul>
                                 <a href="/coursecode1/slim/public/order" class="btn btn-default">Checkout</a>
       <!-- /div -->
           </div>
     </div>

<!-- footer -->
</div>
</div>

    <div id="footer">
      <div class="container">
   <center>All Rights Reserved.</center>
      </div>
    </div>

</body>
</html>

我希望页脚位于页面的最底部，之后没有间隙，怎么做？

Answer 1

您应该在public signInRequest(login:Login):Promise<OAuth> { let params:URLSearchParams = new URLSearchParams(); params.set('userId', login.userId.toString()); params.set('password', login.password.toString()); let requestOption:RequestOptionsArgs = { search: params }; return this.http .get(AppSignIn, requestOption) .toPromise() .then(this.extractData) }属性中使用CSS calc()函数。并将min-height和.col-md-8包装在父div（.col-md-4）中。像，

在HTML中：

.main-content

在CSS中：

<div id="wrap">
  <nav>...</nav>
  <div class="main-content">
    <div class="container-fluid">...</div>
  </div>
  <footer>...</footer>
</div>

查看下面的代码段（使用完整预览）：

＆＃13;

.main-content {
  min-height: calc(100vh - 136px); /* Total viewport height - (height of navbar + height of footer) */
}

＆＃13;

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {}

.main-content {
  min-height: calc(100vh - 136px);
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

.navbar { margin-bottom: 20px; }

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

.table.no-border tr td, .table.no-border tr th {
  border-width: 0;
}

＆＃13;

希望这有帮助！

Answer 2

添加width:100%和position : absolute以及bottom: 0px

#footer {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    bottom: 0px;
    position: absolute;
}

输出

在这种情况下，

position:fixed可以正常工作

Answer 3

#footer {
  height: 60px;
  background-color: #f5f5f5;
    position: fixed;
    bottom: 0;
}

实际上优雅的方式是使用Js或jQuery。

Answer 4

这是对我有用的，

<footer>
 <p class="text-center bg-dark text-white p-2 mb-0">Copyright 1990-2020 by Data. All Rights Reserved.</p>
</footer>

在上面的代码中，产生差异的是 mb-0 ，在 Bootstrap 4 中， mb 表示页边距底部。通过写 mb-0 ，我们指定从底部开始的边距为0dp。

如何在bootstrap 4中删除页脚后的间隙？

4 个答案: