css - 用绝对位置和粘性页脚放在一边

标签 css css-position sticky-footer

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

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

我用了this StickyFooter 解决方案。

问题是右栏。

它应该固定在距页脚 25 像素的位置,但是,如您所见,如果栏内容增加,内容会下降到页脚上方并超出栏底部边框。

显然,我会将内容保留在栏内,导致栏变大并将页脚向下推。

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

最佳答案

保留您的 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; }

附言这是一个糟糕的问题。

我要让你从怀疑中获益,并说你正在为一个不合理的客户工作,或者使用一些不可编辑的 HTML 标记,你需要做一些 hack 才能让它像样。

否则,没有理由采用这种方法。

关于css - 用绝对位置和粘性页脚放在一边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8924580/

相关文章:

javascript - 在 JS 和 CSS 中保持文本恰好为 N 行

css - 带有固定 header 和 960.gs 的 IE7 奇怪行为

css - 粘性页脚未按计划工作

html - 如何使用 CSS 正确定位页脚?

css - 文档类型和部分

jquery - 容器 div 的 z-index 禁用包含的链接

javascript - Vanilla js中的侧边栏多级动画下拉菜单

html - 固定可滚动 div 内的固定 div 不会保持固定

html - 强制 "position: absolute"相对于文档而不是父容器

css - 当内容很短时强制页脚到浏览器底部的现代技术是什么?