余白を使わずにdivの一番下にフッター要素を配置する - ブートストラップ

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>

に整列します。

出典

2016-10-17 user6731422

あなたは、コード例を追加していただけますか？ codepenまたはjsfiddle –

ここでは、私が作ったおしゃべりです>>>>>>> http://plnkr.co/edit/Zwd5DYo2VcZY7DCNQCTg?p=preview – user6731422

あなたのコードは事実上正しいです。しかし、あなたはいくつかの部門を閉鎖していない。あなたはフッターを使用している場合、あなたはCSSを必要としません。 divsを閉じてください:) –

は、私はあなたのためのより高速な方法は、この場合、フッターに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; 
}

最後のステップは、.containerにposition:relativeを追加することです。そうすれば、の.myFooterは正常に動作します。ここで

.container { 
     position: relative; 
}

は実施例である： http://plnkr.co/edit/Ypl82cdqxuHFIjAcpRo8?p=preview

出典

2016-10-17 07:59:59

はこのブートラップのアプローチです – user6731422

ブートストラップのアプローチはどういう意味ですか？中央 –

...あなたはあなたのタスクを達成するために、そのコードを使用する方法、唯一の枠組みあなた次第ですセンターに浮かぶ？中心に合わせるには、整列させる要素に 'text-align：center;'または 'margin：auto'を使います。あなたはこの場合フロートを使用しません – user6731422

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

出典

2016-10-17 07:56:49

余白を使わずにdivの一番下にフッター要素を配置する - ブートストラップ

答えて

関連する問題