边距 0 自动；用于滑块内的粘性页脚答案

【问题标题】：margin 0 auto; for sticky footer inside the slider边距 0 自动；用于滑块内的粘性页脚
【发布时间】：2012-08-04 08:13:27
【问题描述】：

这是我的代码：

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)
        }
    });
});

代码完成了它的工作并且工作正常：它有一个粘性页脚，当您可以按下链接时，它会隐藏/显示它并强制执行。我想要的只是将块 id="slider" 与中心对齐，就像我们在使用 margin:0 auto; 时所做的那样。在不破坏其余功能的情况下。我不知道为什么，但是margin 0 auto；不工作。

【问题讨论】：

标签： css alignment margin footer

【解决方案1】：

当你使用position: absolute; margin:0 auto;不工作。如果你想保持你的 html 代码原样，试试这个

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

希望对你有用。

【讨论】：

【解决方案2】：

将绝对定位的元素放置在其容器的中间：

#slider {
  left: 50%;
  margin-left: -100px; (negative of half of the width of the element)
}

【讨论】：

你的代码在这里jsfiddle.net/vyWTL/3 它可以工作，但是当它向下滑动时，它的宽度会因未知原因而改变......
这是因为负边距放置在中间，jquery ui计算容器的宽度为width-100px。
1.覆盖溢出：.ui-effects-wrapper 的隐藏属性，向下滑动时包裹在#slider 周围。
2.最好将布局更改为相对位置以避免宽度变化，否则您可以将 100px 添加到“.ui-effects-wrapper”的宽度

【解决方案3】：

您定位了#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-cell 之类的东西来获得 100% 的高度。

【讨论】：