ブートストラップサイドカラムのあるフッターを固定

私のテンプレートにはサイドカラムがあり、右側にはコンテンツがあります。私はサイドの列の右側に固定フッターが欲しいが動作しません。ブートストラップサイドカラムのあるフッターを固定

これは、例えばテンプレートです：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-4 col-lg-2"> 
     <nav class="navbar navbar-default navbar-fixed-side"> 
     <?php include("side_menu.php"); ?> 
     </nav> 
    </div> 
    <div class="col-sm-8 col-lg-10"> 
    <!-- ******** startBody ******** --> 
     <?php include("header.php"); ?> 

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
       <div class="panel panel-info"> 
        <div class="panel-heading">Text</div> 
        <div class="panel-body"> 
        </div> 
        <div class="panel-footer"><a href="element.php">...see all</a></div> 
       </div>  
     </div> 
    </div> 

</div>  

    <!-- ******** endBody ******** --> 
     <?php include("footer.php"); ?> 

    </div> 
    </div> 
</div>

それを修正する方法は？ありがとう

出典

2016-10-07 Frankie

フレックスボックスの使用を検討しましたか？これはおそらくそれでかなり簡単に解決できます。 –

デモが追加されました。 –

URL http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=hのすべての下のコンテンツをペーストして作業デモをご覧ください。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style> 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 

</style> 
</head> 
<body> 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-4 col-lg-2" style="background-color:red;">  
     NNNNNNNNN  


    </div> 
    <div class="col-sm-8 col-lg-10 "style="background-color:green;"> 
      BBBBBBBBBBB <br/>    
    </div> 

    <div class="row"> 
<div class="col-md-offset-4 col-lg-offset-2 col-sm-8 col-lg-10 footer">FFFFFFFFFF<div> 

     </div> 

    </div> 
    </div> 
</div> 
</body> 
</html>

出典

2016-10-07 13:43:33

ブートストラップサイドカラムのあるフッターを固定

答えて

関連する問題