Sticky footer for Twitter bootstrap Bakey Follow 2011-09-10 19:57:30 License: MIT License Fork2 Fav0 View5140 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 39 lines CSS 34 lines Twitter bootstrapと下部固定フッタのサンプルです。 Sticky footer for Twitter bootstrap <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Sticky footer for bootstrap</title> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css" media="screen" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <!-- Header ================================================== --> <div class="topbar"> <div class="topbar-inner"> <div class="container"> <h3><a href="/">Stickey footer for bootstrap</a></h3> </div> </div> </div> <!-- Container ================================================== --> <div id="container-wrap"> <div class="container"> <div id="content"> Contents </div> </div> </div> </div><!-- #wrap end--> <!-- Footer ================================================== --> <div id="footer"> Sticky Footer </div> </body> </html> Sticky footer for Twitter bootstrap /* None fixed topbar */ .topbar { position: relative; } /* Footer */ html,body { height: 100%; } #wrap { min-height: 100%; } #container-wrap { padding-top: 10px; padding-bottom: 50px; } #footer { clear: both; text-align: center; height: 30px; padding-top: 10px; padding-bottom: 10px; position: relative; margin-top: -50px; } Twitter bootstrapと下部固定フッタのサンプルです。 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Sticky footer for bootstrap</title> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css" media="screen" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <!-- Header ================================================== --> <div class="topbar"> <div class="topbar-inner"> <div class="container"> <h3><a href="/">Stickey footer for bootstrap</a></h3> </div> </div> </div> <!-- Container ================================================== --> <div id="container-wrap"> <div class="container"> <div id="content"> Contents </div> </div> </div> </div><!-- #wrap end--> <!-- Footer ================================================== --> <div id="footer"> Sticky Footer </div> </body> </html> /* None fixed topbar */ .topbar { position: relative; } /* Footer */ html,body { height: 100%; } #wrap { min-height: 100%; } #container-wrap { padding-top: 10px; padding-bottom: 50px; } #footer { clear: both; text-align: center; height: 30px; padding-top: 10px; padding-bottom: 10px; position: relative; margin-top: -50px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Twitter bootstrapと下部固定フッタのサンプルです。 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Bakey URLhttp://d.hatena.ne.jp/gapao/ Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/h9fw/js"></script> Tweet Twitter Discussion Questions on this code? Forked sort by latest page views favorite forked forked: Sticky footer for Twit NARKOZ 00 170 0/39/34 forked: Sticky footer for Twit mihey 20 4010 2/39/34
