jQuery動的位置決め

12215 ワード
jquery
ページレイアウトについては、これまでfooterの位置付けの仕方が分からなかったのですが、jQueryでこれらの機能を実現したいと思って自分で時間をかけてページを作って、#headerの高さに応じて#mainと#footerの位置を動的に設定することができました.
css 
body,html{

    margin: 0;

    padding: 0;

    border: 0;

    height: 100%;

}

#container{

    min-width: 100%;

    min-height: 100%;

    position: relative;

    margin: 0;

}

#header{

    width: 100%;

    height: 150px;

    background: #f0f;

    position: absolute;

    margin: 0;

}

#main{

    width: 100%;

    height: 700px;

    background: #f00;

    position: absolute;

    margin-top: 150px;

}

#footer{

    width: 100%;

    height: 50px;

    background: #0f0;

    position: absolute;

}

 
考え方:一、container小包ヘッダ、main、footerを設定する
二、まずhtml要素とbody要素に高さ(height属性)を100%に設定し、ルート要素の高さがブラウザウィンドウ全体を満たすことを保証してから、#containerの高さがブラウザウィンドウ全体を満たすことができます.htmlとbody要素を同時に設定する理由については、FirefoxとIEが考えるルート要素が異なるため、ここで設定します.
三、containerを相対位置決めに設定し、
containerを相対位置決め(9行目)に設定し、彼をその中のfooterの位置決め基準、すなわちいわゆる「最近の位置決めされた祖先要素」にすることを目的としている.次に、foooterを絶対位置決めしてcontainerの最下端に貼るように設定します.min-heightを100%に設定します.min-heightプロパティの役割は、#containerの高さをブラウザウィンドウの高さに「少なくとも」することですが、中身が増加すると、彼の高さも増加します.これこそ私たちが必要とする効果です.
四、ヘッダーの値を設定し、ヘッダーのheight値に基づいてmainのmargin-topの値を設定する.これにより、2つのdivの距離を0に設定し、jQueryで#headerの値と#mainの値を動的に取得し、#footerのmargin-top値を#mainと#headerの高さの和に設定することができます.
これでfooterを一番下に位置決めできます.
html 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>  </title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="resource/css/bootstrap.css">

    <link rel="stylesheet" type="text/css" href="resource/css/common.css">

    <script src="resource/js/jquery-2.1.1.js"></script>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="resource/js/bootstrap.js"></script>

    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

</head>

<body>

    <div id="container">

        <div id="header">header</div>

        <div id="main">content</div>

        <div id="footer">footer</div>

    </div>

    <script type="text/javascript">

    $(function(){

        var a=$("#main").height()+$("#header").height();

        var marginTop=a+'px';

        $("#footer").css("margin-top",marginTop);

    });

    </script>

</body>

</html>

【Webフロントエンド】移動端H 5の開発で遭遇したピット
jQuery学習ノート(一)