div位置绝对和粘性页脚

时间：2012-01-19 10:35:41

标签： css css-position sticky-footer

我遇到以下html布局问题。

我知道还有其他关于绝对定位和粘性页脚的问题，我尝试了很多解决方案，但我没有做到这一点，所以我尝试发布整个布局html代码，看看是否有人能找到解决方案

我使用了this StickyFooter解决方案。

问题是正确的吧。

它应该保持固定在距离页脚25px的位置，但是，正如您所看到的，如果条形内容增长，则内容会在页脚下方和条形底部边框之外下降。

显然我会将内容留在栏内，导致栏杆长大并推倒页脚。

<!doctype html>
<head>
    <style type="text/css">        
        /* Sticky Footer */
        { margin: 0; }
        html, body, form { height: 100%; }

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

        #footerPage, #divPush 
        {
            height: 50px; /* .push must be the same height as .footer */
        }
        /* End / Sticky Footer */


        body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }

        div.wrapper { background-color:#fff; position:relative; }

        #headerPage {  }
            #divHeaderImg { height:100px; }            
            #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
            #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }

        #sectionBar {
            z-index:1000;
            position:absolute; right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
            border:solid 2px #90bfe7; background-color:#ffffff; 
            padding:15px 10px;
        }        

        #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

        #sectionPage { padding:12px 10px 10px 10px; width:700px; }
    </style>
</head>
<body>
<div class="wrapper">
    <div id="sectionBar">
        <div id="divBarContent">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
                Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                Integer quam turpis, porttitor nec congue convallis, fringilla sit amet purus. Donec at elit mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula tellus, rhoncus eget faucibus vitae, bibendum vel arcu. Pellentesque ante lectus, sodales at interdum sit amet, sollicitudin cursus quam. Fusce eget orci vel eros scelerisque dictum. Cras facilisis, metus vitae venenatis aliquet, nibh sem blandit mi, sit amet viverra massa ipsum ut quam. Vivamus vitae nunc eget justo pellentesque mollis vel non justo. Mauris tempus mattis rutrum. Donec nec viverra nulla. Cras commodo felis sit amet nulla fringilla mollis. 
            </div>
        </div>
    </div>
    <div id="headerPage">
        <div id="navPage">menu</div>
        <div id="divHeaderImg"></div>
        <div id="divSubMenu">sub menu</div>
    </div>
    <div id="sectionPage">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
        Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
    </div>
    <div id="divPush"></div>
</div>
<div id="footerPage">footer</div>
</body>
</html>

8 个答案:

答案 0 :(得分：1)

保持HTML原样，将CSS更改为：

   /* Sticky Footer */
    { margin: 0; }
    html, body, form { height: 100%; }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
        clear:both;
    }

    #footerPage, #divPush 
    {
        height: 50px; /* .push must be the same height as .footer */
    }
    /* End / Sticky Footer */


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }

    div.wrapper { background-color:#fff; position:relative; }

    #headerPage { width:960px;position:absolute;top:0;left:0; }
        #divHeaderImg { height:100px; }            
        #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle;width:940px; }
        #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }

    #sectionBar {
        z-index:1000;
        position:relative; float:right;right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
        border:solid 2px #90bfe7; background-color:#ffffff; 
        padding:15px 10px;
    }     
    #divPush {clear:both;}

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

    #sectionPage { padding:12px 10px 10px 10px; width:700px;padding-top:190px; }

P.S。这是一个糟糕的问题。

我将向您提供怀疑的好处，并说您正在为一个不合理的客户或一些不可编辑的HTML标记工作，您需要做一些黑客才能使这一点变得明显。

否则，采取这种方法没有任何借口。

答案 1 :(得分：0)

我要移除position:absolute;并在float:right;定义中添加#sectionBar。 然后在使用“wrapper”类关闭div之前立即添加<br clear="all" />。

然后你必须重新定位你的元素。处理边距和填充以获得所需的结果。

您描述的问题是由position:absolute行为引起的。事实上，通过绝对定位，元素从html的自然流中移除，顾名思义，绝对定位:)因此，其他元素（例如页脚）在“它下面”。

答案 2 :(得分：0)

我对你发布的代码做了一些修改，希望有所帮助！`

<style type="text/css">        
    /* Sticky Footer */
    { margin: 0; }
    html, body, form { height: 100%; }

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

    }

    #footerPage 
    {
        height: 50px; /* .push must be the same height as .footer */

    }

    #divPush {height: 800px; }

    /* End / Sticky Footer */


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }

    div.wrapper { background-color:#fff; position:relative; }

    #headerPage {  }
        #divHeaderImg { height:100px; }            
        #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
        #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }

    #sectionBar {
        z-index:1000;
         right:10px; top:13px; width:200px;  /* footer height + 25px */
        border:solid 2px #90bfe7; background-color:#ffffff; 
        padding:15px 10px;
        display:inline;
        float:right;
        height: 100%;
    }        

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

    #sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>`

答案 3 :(得分：0)

我可能会对你要找的东西感到困惑，但为什么不在id = sectionBar下添加overflow：auto？这样，如果内容大于你的盒子，它将添加一个滚动条而不是流过页脚。同样，也许我错过了你正在寻找的问题或最终结果。

答案 4 :(得分：0)

@ lorenzo.macon是对的 - 你需要避免使用position: absolute，而是使用浮点数。

您的一个问题是，您的页脚需要具有与包装器的负边距相同的总高度;看起来你可能没有在等式中考虑填充和/或边界。

提供的代码在代码中包含第二个侧边栏，因此如果它没有浮动（例如，对于响应式布局），它将在稍后出现。但你实际上可以用任何一种方式，它应该有效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">        

/* LAYOUT */
    /* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */

* { margin: 0 }

html, body, .wrapper {
    height: 100%;
    }

body {
    margin: 0 auto; 
    position: relative; 
    }

.wrapper {
    position: relative; 
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -70px; /* bottom margin = -1 x ( #footerPage height + padding + border ) */
    }

#footerPage, #divPush {
    height: 50px; /* .push must be the same height as .footer */
    padding: 10px; /* must have same padding! */
    }
#divPush {
    clear: both;
    }
    /* End / Sticky Footer */


#sectionPage {
    width: 70%;
    float: left;
    }

/* 
    #sectionBar has percentage for L+R padding, so can calculate w/ #sectionPage
    and ems for T+B padding so can relate to typography. This is less important.
*/
#sectionBar {
    width: 20%;
    padding: 2em 5%;
    margin-left: -1px; /* IE7 needed this */
    float: right;
    display: inline; /* Fix for IE5/6 doubled float margin issues - see http://www.positioniseverything.net/explorer/doubled-margin.html */
    }        

/* VISUAL STYLE separated for clarity */

body {
    background: #000; 
    max-width: 960px; /* use max-width for flexible layouts */
    font-family: Tahoma, Verdana;
    }

div.wrapper { background: #fff }

#divHeaderImg { height: 100px; }            
#navPage { background: #90bfe7; padding: .5em; }
#divSubMenu {
    background: #90bfe7;
    padding: .5em;
    }

#sectionBar {
    background: #fcf; 
    }        

#footerPage {
    position: relative;
    background: #90bfe7;
    }

#content {
    background: #ffc;
    padding: 12px 10px 10px 10px;
    }
    </style>
</head>
<body>
<div class="wrapper">

  <div id="sectionPage">
    <div id="headerPage">
      <div id="navPage">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div>
      <div id="divHeaderImg"></div>
      <div id="divSubMenu">sub menu</div>
    </div><!-- #headerPage -->
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
    </div>
  </div><!-- #sectionPage -->

  <div id="sectionBar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
  </div>

  <div id="divPush"></div>

</div><!-- .wrapper -->

<div id="footerPage">footer</div>
</body>
</html>

答案 5 :(得分：0)

你无法使条形绝对具有顶部和底部“边距”，并且期望它增长超出你所说的尺寸。

下面是一个略有不同的方法，看起来非常（完全？）和你的一样。我没有在firefox 8以外的其他浏览器中进行测试，所以我不能保证它是防弹的，但这至少应该给你一个替代的想法：

<!doctype html>
<head>
<style type="text/css">        
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }

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

#footerPage, #divPush 
{
    height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */


body { background-color:#000;
 width:960px;
 margin:0 auto;
 position:relative;
 font-family:Tahoma, Verdana;
 }

div.wrapper { 
    background-color:#fff; position:relative; 
    border:2px solid pink;
}

#headerPage {  
    border:2px solid green;
}
#divHeaderImg { height:100px; }            
#navPage { 
    height:30px;
 line-height: 30px;
 font-size:16px;
 background-color:#90bfe7;
 padding:0 10px;
 /*
 position:relative;
 overflow:hidden;
 */
 vertical-align: middle;
    border:2px solid lime;

 }
#leftBox {
    border:2px solid yellow;
    float;left;
}
#divSubMenu { 
    border:2px solid darkgreen;
    background-color: #90BFE7;
 line-height: 28px;
 padding: 10px;
 vertical-align: middle;
 }

#divBarContent {
    border:1px solid firebrick;
}
#divBarContent div {
    border:1px solid cyan;

}        
#sectionBar {
    z-index:1000;
    /*
     position:absolute; right:10px; top:13px; width:200px; bottom:75px; 
    */
    border:solid 2px #90bfe7; background-color:#ffffff; 
    padding:15px 10px;
    float:right;
    margin:0px 10px 25px 0px;
    width:200px;
    /*
    */
}        
/*
*/
/* footer height + 25px */

#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>
</head>
<body>
<div class="wrapper">
    <div id="sectionBar">
        <div id="divBarContent">
            <div>

# Update from 2.0-BETA3 to 2.0-BETA4

## XML Driver <change-tracking-policy /> element demoted to attribute

We changed how the XML Driver allows to define the change-tracking-policy. The working case is now:


# Update from 2.0-BETA2 to 2.0-BETA3

## Serialization of Uninitialized Proxies

As of Beta3 you can now serialize uninitialized proxies, an exception will only be thrown when
trying to access methods on the unserialized proxy as long as it has not been re-attached to the
EntityManager using `EntityManager#merge()`. See this example:


The Collection interface in the Common package has been updated with some missing methods
that were present only on the default implementation, ArrayCollection. Custom collection
implementations need to be updated to adhere to the updated interface.


            </div>
        </div>
    </div>

    <div id="leftBox">
        <div id="headerPage">
            <div id="navPage">menu</div>
            <div id="divHeaderImg"></div>
            <div id="divSubMenu">sub menu</div>
        </div>
        <div id="sectionPage">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
            Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
            <br> <br> <br> <br> <br> <br> moo
        </div>
        <div id="divPush"></div>
    </div>
    <div style="clear:both;">
</div>
<div id="footerPage">footer</div>

</body>
</html>

答案 6 :(得分：0)

你可以使用position:relative;代替，因为绝对会让你的元素落后于它，除非你使用z-index:然后元素将在它之上。如果你真的必须以这种方式构建它，请看这个粘性页脚

http://www.cssstickyfooter.com/using-sticky-footer-code.html

修改

我不确定你要完成什么。因为HTML构建的当前方式对于您正在做的事情而言并不是真正的语义。由于sectionBar是一个侧栏，它不应该高于你的主要内容，它应该在你的sectionPage内容之后构建。您还应该使用浮动而不是位置。这样您就不必处理z-index和内容落后。该页面也可以使用float正确扩展，但你必须主要使用.clearfix hack for IE。

几乎从来没有必须以某种方式构建某些东西的情况。唯一的情况是，如果您使用CMS或现有的旧代码。因此，如果您没有获得想要的效果，那么您需要查看代码的Semantic结构。

我在你的一条评论中看到，这是基于一个photoshop布局，这让我相信你是从头开始构建这个，这意味着你可以完全控制HTML。所以，如果是这种情况，那么说它必须以这种方式构建是不可接受的。

答案 7 :(得分：0)

可以解决。您可以通过将@ {lorenzo.marcon提到的#sectionBar浮动来实现。

您需要移动#sectionBar to right before #sectionPage`并包装这两个元素。我还为包装器添加了一个clearfix。

有关解决方案，请参阅this fiddle。

相关问题
最新问题