-1

これが私のコードです：

CSS:

{
    margin      : 0;
    font-family : Arial, Helvetica, sans-serif;
}

html
{
    height : 100%;
}

body
{
    height              : 100%;

    background-color    : #d1e3ec;
    background-image    : url(img/map-v.jpg);
    background-repeat   : no-repeat;
    background-position : top center;
}



#wrapper
{
    min-height : 100%;
    height     : auto !important; /*IE6*/
    height     : 100%; /*IE6*/
    margin     : 0 auto -70px; /* the bottom margin is the negative value of the footer's height */
}


.content
{
    overflow : hidden;
    width    : 200px;
    margin   : 0 auto;
}

#footer, #push
{
    height : 70px; /* .push must be the same height as .footer */
}

#footer
{
    background-color : #019790;
}





#global-container
{
    overflow   : hidden;
    position   : relative;
    width      : 100%;
    min-height : 100%;
}


#slider
{
    background : green;
    height     : 100%;
    position   : absolute;
    left       : 0;
    margin     : 20px 0 0 0;
}

#slide-link
{
    position : absolute;
    top      : 0;
    left     : 0;
    z-index  : 9999;
    height   : 20px;
}

HTML:

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

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

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


<div id="global-container">
    <div id="slide-link" style="border:1px solid red; width:100%;"><a href="#" >Click here</a></div>
    <div id="slider" style="border:1px solid red;">
        <div id="wrapper">
            <div class="content">content</div>
            <div id="push"></div>
        </div>
        <div id="footer">
            footer
        </div>
    </div>
</div>

テスト スクリプト:

$(document).ready(function ()
{
    $("#slide-link").click(function ()
    {

        if ($("#slider").is(":visible"))
        {
            var containerHeight=$("#global-container").height()-25;

            $("#slider").hide("slide", { direction:"down" }, 1000);
            $("#slide-link").animate({top:containerHeight}, 1050)

        } else if ($("#slider").is(":hidden"))
        {
            $("#slider").show("slide", { direction:"down" }, 1000);
            $("#slide-link").animate({top:'0px'}, 950)
        }
    });
});

コードはそれが行うことを行い、正常に動作します: スティッキー フッターがあり、リンクを押すことができると、それを非表示/表示して強制的に表示します。margin:0 auto; を使用するときのように、ブロック id="slider" を中央に揃えるだけです。残りの機能を壊すことなく。理由はわかりませんが、マージン 0 auto; 動作しません。

4

3 に答える 3

1

position: absolute;margin：0autoを使用している場合の最初のこと。動作しません。HTMLコードをそのままにしておきたい場合は、これを試してください

#slider {
    background : green;
    height : 100%;
    position : absolute;
    width:300px;
    top:0;
    left:50%;
    margin-top:20px;
    margin-left:-150px;
}

それがあなたに役立つことを願っています。

于 2012-08-07T10:51:38.810 に答える
1

絶対配置要素をコンテナの中央に配置するには:

#slider {
  left: 50%;
  margin-left: -100px; (negative of half of the width of the element)
}
于 2012-08-07T10:48:26.007 に答える
0

あなたは#slider絶対を配置しました。これにより、マージンに関して親要素のフローから除外され、次の理由により左側に配置されleft: 0;ます。

#slider {
    position   : absolute;
    left       : 0;
    margin     : 20px 0 0 0;
}

あなたができることは、これです：

#slider {
    position   : inherit;
    margin     : 20px auto 0 auto;
    width:     : 200px;
}

この場合、幅を明示的に設定する必要があり、高さも手動で調整するか、display: table-cell100% の高さを取得するようなものを使用する必要があります。

于 2012-08-07T10:43:55.477 に答える