コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSでフッターの位置を実装する方法（完全なコード）

CSSでフッターの位置を実装する方法（完全なコード）

不言
リリース： 2018-09-11 17:28:49
オリジナル
2232 人が閲覧しました

この記事の内容は CSS でフッターの位置を実装する方法 (完全なコード) です。必要な方は参考にしていただければ幸いです。

CSS はフッターの位置決めを実装します

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <style>
        html,body{     
              width: 100%;            
              height: 100%;            
              margin: 0;            
              padding: 0;        
              }

        *{          
          margin: 0;            
          padding: 0;        
          }
        .box{   
                width: 100%;            
                min-height: 100%;            
                padding-bottom: 50px;            
                box-sizing: border-box;            
                background: #e4e4e4;        
                }
        .content{    
                background: #fff;            
                border-bottom: 1px solid #999;        
                }
        button{      
              margin: 10px auto;            
              line-height: 30px;            
              width: 20%;        
              }
        footer{       
             height: 50px;            
             line-height: 50px;            
             text-align: center;            
             margin-top: -50px;            
             background: #fff;        
             }
    </style>
    </head>
    <body>
    <div class="box">
        <button onclick="beLong()">变长</button>
        <p class="content" id="content">内容</p>
    </div>
    <footer>footer</footer></body><script>
    function beLong() {
        document.getElementById(&#39;content&#39;).style.height = &#39;1000px&#39;;
    }</script>
    </html>
ログイン後にコピー

関連する推奨事項:

CSS3 でのトランジションの使用についての深い理解

CSS のスプライトを介してカットテクノロジーを実装する方法 (コード付き)

以上がCSSでフッターの位置を実装する方法（完全なコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css
ソース：php.cn
前の記事：4 方向の矢印を実装する CSS コード 次の記事：CSS 変数との最初の接触
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート