Question

我正在尝试使用bootstrap将页脚放置到div的底部，而不对div应用边距我想将div作为页脚推到底部。这是我的尝试，但页脚与顶部对齐

<div style="background-color:#191919;" class="container">
    <h3 style="color: #32CD32; font-family: Copperplate; align:left;">
    HEADER TEXT
    </h3>
    <h5>... reaching out</h5>
    <hr style="width:101.6%;">


    <div class="col-lg-12">
        <nav id="main_menu">
            <div align="center" class="menu_wrap">

            </div>
        </nav>
        <div class="row">
            <div class="contents">
                The contents in each page
            </div>
        </div>


        <footer style="color:#fff; text-align:center;"> &copy 2016 All rights reserved
            <br> For more information visit our website
        </footer>
    </div>

</div>

请问如何将页脚放在底部。

Answer 1

<html>
<head>

<title>
Lugah Salisu Foundation
</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style type="text/css">

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h3{
     font-size: 300%; 
     margin-bottom: 0px;
     clear: both;
     margin-left: 7px;
}
h5{
    margin-top: 0px;
    padding: 0px;
    margin-left: 15px;
    color: #fff;
    margin-bottom: 1px;
    clear: both;
}
hr{
    margin: 0px;
}

.container {
    width: auto;
    margin-left: 200px;
    margin-right: 200px;
    height:500px;
    max-height:500px !important;
    padding-left: 0px;
  }

 .nav>li {
    position: relative;
    display: inline-block!important;
 }
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color:transparent!important;
    color:#d3d3d3;
}
.nav>li>a {
    padding: 10px 4px!important;
    color:#fff;

}

.golden-base {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight:bold;
  -webkit-margin-before: 0.3em; 
  -webkit-margin-after: 0.2em;
}
.golden1 {
  background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
  text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60);
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


</style>

</head>

<body style="background-color:#1f5060;">

<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
 <h5>... reaching out</h5> <hr style="width:101.6%;">


 <div class="col-lg-12">
              <nav id="main_menu">
                                <div align="center" class="menu_wrap"></div>
                                   <ul class="nav sf-menu">
                                     <li class="sub-menu"><a href="home.html"><small>Home</small></a></li> |                    
                                    </ul>
                                </div>
</div>
 </nav> 
  <footer style="color:#fff; text-align:center;">  &copy 2016 All rights reserved 

<div class="row">
<div class="contents">
The contents in each page
</div>
</div>                           





</div>
</footer>

</body>
</html>

Answer 2

有多种方法可以做到这一点，我认为更快的方法是在页脚上使用position: absolute;

首先从.col-lg-12移出你的页脚，成为.container的直接孩子。我还添加了一个课程.myFooter

<footer class="myFooter">
      copy 2016 All rights reserved
      <p>You can visit our website for more info</p>
</footer>

然后是css。不要在标记上使用css内联。我将颜色和文本对齐移动到了班级。

.myFooter {
      color:#fff;
      text-align:center;
      position: absolute;
      bottom: 0;
}

最后一步是将position:relative添加到.container。这样position:absolute .myFooter就能正常工作。

.container {
      position: relative;
}

这是一个工作示例： http://plnkr.co/edit/Ypl82cdqxuHFIjAcpRo8?p=preview

将页脚元素放在div的底部而不使用margin - bootstrap

2 个答案: