Home
Programming-網頁語法-CSS

[CSS] 固定在底部的按鈕(響應式設計RWD)

[CSS] 固定在底部的按鈕(響應式設計RWD)

3月 24, 2016

作者：月

Sample code

> HTML5 作法
> HTML4 作法
> button.css
> RWD

HTML5 作法 HTML4 作法 button.css RWD

☞ Conor Darcy | Tutorial Belajar Stick a Footer to the Bottom – HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Page Title</title>
<link rel="stylesheet" href="css/button.css" />
<style>
html,
body {
    margin : 0;
    padding: 0;
    height : 100%;
}
.wrapper {
    min-height: 100%;
}
header { 
 width        : 100%;
 background   : #CDCDCD;
 padding      : 10px;
 border-bottom: 1px solid #444444;
 text-align   : center;
}  
footer {
 margin-top:-100px;
 height    : 100px;
 width     : 100%; 
 background: #CDCDCD;
 padding   : 10px;
 border-top: 1px solid #444444;
 text-align: center;
}
.content{ 
 padding-bottom: 100px; 
}
</style>
</head>
<body>
    <div class="wrapper">
  <header>
      <h1>固定在底部的按鈕</h1>
  </header><!-- #header -->
 
        <div class="content">
         <div class="btn-group">
             <a class="btn-look btn1">按鈕 1</a>
             <a class="btn-look btn2">按鈕 2</a>
             <a class="btn-look btn1">按鈕 4</a>
             <a class="btn-look btn2">按鈕 5</a>
             <a class="btn-look btn3">按鈕 3</a>
         </div>
         <p>
          這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文
         </p>
        </div><!-- #content -->
    </div><!--end wrapper-->
 
    <footer>
        <p>這是底部</p>
    </footer><!-- #footer -->
</body>
</html>

☞ CSS Reset | How To Keep Your Footer At The Bottom Of The Page With CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Page Title</title>
<link rel="stylesheet" href="css/button.css" />
<style>
html,
body {
    margin : 0;
    padding: 0;
    height : 100%;
}
#wrapper {
    min-height: 100%;
    position  : relative;
}
#header {
 width        : 100%;
 background   : #CDCDCD;
 padding      : 10px;
 border-bottom: 1px solid #444444;
    text-align   : center;    
}  
#footer {
 position  : absolute;
 bottom    : 0;
 left      : 0;
 height    : 100px;
 width     : 100%;
 background: #CDCDCD;
 padding   : 10px;
 border-top: 1px solid #444444;
    text-align: center;
}
#content {
    padding-bottom: 120px;
}
</style>
</head>
<body>
<div id="wrapper">   
    <div id="header">
        <h1>固定在底部的按鈕</h1>
    </div><!-- #header -->
     
    <div id="content">
        <div class="btn-group">
            <a class="btn-look btn1">按鈕 1</a>
            <a class="btn-look btn2">按鈕 2</a>
            <a class="btn-look btn1">按鈕 4</a>
            <a class="btn-look btn2">按鈕 5</a>
            <a class="btn-look btn3">按鈕 3</a>
        </div>
        <p>
        這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文
     </p>
    </div><!-- #content -->
     
    <div id="footer">
        <p>這是底部</p>
    </div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

/* 按鈕設定 */
.btn-group {
    width  : 100%;
    display: flex;
    display: -webkit-flex;
}
.btn-look {
    font-size   : 16px;
    text-align  : center;
    padding     : 10px;
    flex        : 1;
    -webkit-flex: 1;
    line-height : 30px!important;
    height      : 30px;
}
.btn1 {
    background-color: #c00;
    color           : #fff;
}
.btn2 {
    background-color: #095;
    color           : #fff;
}
.btn3 {
    border          : 1px solid #d9d9d9;
    background-color: #059;
    color           : #fff;
    display         : none;
}
  
/* 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS 
 * 1. 將按鈕修成圓角
 * 2. 將 btn3 印出來
 */
@media screen and (min-width: 1200px) {
    .btn-look {
        border-radius: 5px;
        margin-right : 5px;
    }
    .btn3 {
        display: inline;
    }
}
  
/* 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS 
 * 1. 將按鈕置於底部
 * 2. 調整按鈕的透明度
 */
@media screen and (max-width: 767px) {
    .btn-group {
        position: fixed;
        bottom  : -1px;
        z-index : 1;
    }
    .btn-look {
        opacity      : .85
    }
}

☞ 樂在設計 | CSS3 MEDIA QUERIES 詳細介紹與使用方法，RESPONSIVE WEB DESIGN 必備技術
☞ 小雕雕的家 | Responsive Web Design (RWD) 響應式網站開發教學與心得

//全部的使用者都會載入這裡的 CSS。
 
@media screen and (min-width: 1200px) {
    // 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。
}
 
@media screen and (min-width: 768px) and (max-width: 979px) {
    // 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。    
}
 
@media screen and (max-width: 767px) {
    // 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。    
}
 
@media screen and (max-device-width: 480px) {
    // 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。 
}

〔下載我的範例〕

☞ CSS 固定在底部的按鈕

Source

☞ W3CPLUS | 使用CSS3 Flexbox的佈局
☞ OXXO.STUDIO | 深入解析 CSS Flexbox
☞ CSS-Tricks | A Complete Guide to Flexbox
☞ 數碼維基 | Html: 如何添加固定按鈕,頁面的右下角嗎
☞ WFU BLOG | 部落格行動版的首頁設計﹍欣賞這 9 個網站的版面效果
☞ wibibi.com | CSS 置底技巧，可用於 Footer 區塊

Image Source

☞ W3C | HTML structural elements
☞ Dunia Ilkom | HTML5 Part 6: Cara Membuat Struktur HTML5 (Tag header, footer dan aside)
☞ Web Development Notes | HTML將footer置底的方法(使用CSS)

訂閱：張貼留言 ( Atom )