Css 用绝对位置和粘性页脚将div放到一边_Css_Css Position_Sticky Footer

Css 用绝对位置和粘性页脚将div放到一边

css

Css 用绝对位置和粘性页脚将div放到一边,css,css-position,sticky-footer,Css,Css Position,Sticky Footer,我遇到了以下html布局的问题我知道还有其他关于绝对定位和粘性页脚的问题，我尝试了很多解决方案，但都没有成功，所以我试着发布整个布局html代码，看看是否有人能找到解决方案我使用了粘性页脚解决方案问题是正确的酒吧它应该保持固定在距页脚25px的位置，但是，正如您所看到的，如果条形图内容增长，则内容会下降到页脚上方和条形图底部边框之外很明显，我会将内容留在条内，导致条增长并向下推页脚 <!doctype html> <head> <style typ

我遇到了以下html布局的问题

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

我使用了粘性页脚解决方案

问题是正确的酒吧

它应该保持固定在距页脚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>


/*粘脚*/
{边距：0；}
html，正文，表单{高度：100%；}
.包装纸{
最小高度：100%；
高度：自动！重要；
身高：100%；
边距：0自动-50px；/*底部边距是页脚高度的负值*/
}
#页脚，#divPush
{
高度：50px；/*.push的高度必须与.footer的高度相同*/
}
/*结束/粘性页脚*/
正文{背景色：#000；宽度：960px；边距：0自动；位置：相对；字体系列：Tahoma，Verdana；}
div.wrapper{背景色：#fff；位置：相对；}
#标题页{}
#divHeaderImg{高度：100px；}
#导航页面{高度：30px；行高：30px；字体大小：16px；背景色：#90bfe7；填充：0 10px；位置：相对；溢出：隐藏；垂直对齐：中间；}
#div子菜单{背景色：#90BFE7；行高：28px；填充：10px；垂直对齐：中间；}
#型材{
z指数：1000；
位置：绝对；右侧：10px；顶部：13px；宽度：200px；底部：75px；/*页脚高度+25px*/
边框：纯色2px#90bfe7；背景色：#ffffff；
填充：15px 10px；
}        
#页脚{位置：相对；填充：10px；背景色：#90bfe7；颜色：#000；}
#第页{填充：12px 10px 10px 10px；宽度：700px；}
Lorem ipsum dolor sit amet，是一位杰出的献身者。非营养饮食。维瓦摩斯·欧维利特·维利特·佩伦茨克·福西布斯。不要喝啤酒，不要喝啤酒，不要喝啤酒。在适当的位置上，我们可以选择大杂烩，大杂烩，大杂烩，小杂烩。这是一个很好的例子。Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克欧盟显贵尼西。
这是我的人生。请不要为我的生活增光添彩。这是我的自由。Donec facilisis，矢状位tellus，arcu orci posuere Elite，luctus odio nunc ac sem。埃塔姆在埃拉特和内克·特里斯蒂克·埃利芬德。这是一种暂时性的绿色屠宰场。非智人休止符。虎口浮雕和肘部浮雕同侧前庭；
Integer quam turpis、porttitor nec congue convallis、fringilla sit amet purus。在elit mauris的Donec。虎口浮雕和肘部浮雕同侧前庭；Donec ligula tellus，rhoncus eget faucibus vitae，bibendum vel arcu。佩伦特斯式的前选战，在interdum sit amet的苏打水，sollicitudin cursus quam。这是一句名言。设施简陋，威尼斯人的生命之美，我的身体健康，我的身体健康。我的生命只有一次，没有一次。毛里斯·坦普斯·马蒂斯·鲁特姆。Donec nec viverra nulla。猫咪们坐在阿梅特·努拉·弗林利亚·莫利斯旁边。
菜单
子菜单
Lorem ipsum dolor sit amet，是一位杰出的献身者。非营养饮食。维瓦摩斯·欧维利特·维利特·佩伦茨克·福西布斯。不要喝啤酒，不要喝啤酒，不要喝啤酒。在适当的位置上，我们可以选择大杂烩，大杂烩，大杂烩，小杂烩。这是一个很好的例子。Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克欧盟显贵尼西。
这是我的人生。请不要为我的生活增光添彩。这是我的自由。Donec facilisis，矢状位tellus，arcu orci posuere Elite，luctus odio nunc ac sem。埃塔姆在埃拉特和内克·特里斯蒂克·埃利芬德。这是一种暂时性的绿色屠宰场。非智人休止符。虎口浮雕和肘部浮雕同侧前庭；
Lorem ipsum dolor sit amet，是一位杰出的献身者。非营养饮食。维瓦摩斯·欧维利特·维利特·佩伦茨克·福西布斯。不要喝啤酒，不要喝啤酒，不要喝啤酒。在适当的位置上，我们可以选择大杂烩，大杂烩，大杂烩，小杂烩。这是一个很好的例子。Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克欧盟显贵尼西。
页脚

我会删除

位置：绝对

并添加一个

浮点：右在#节栏中定义。
然后在使用类“wrapper”关闭div之前立即添加一个

然后必须重新定位元素。对边距和填充物进行处理，以获得所需的结果
您描述的问题是由位置：绝对行为引起的。事实上，使用绝对定位，元素从html的自然流中移除，顾名思义，绝对定位：）因此，其他元素（例如页脚）在它的“下方”。我做了一些更改
<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>`

<!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>

   /* 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; }

<!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>