div显示在底部(一种固定不变，另一种随页面上下翻动而动)-优快云博客

本文介绍了一种利用CSS实现页面元素的灵活布局方法，通过具体的HTML和CSS代码示例，展示了如何使页面主体内容与底部栏在不同屏幕尺寸下都能保持良好的视觉效果。文章特别强调了清除浮动和固定定位的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <style type="text/css">
        html, body, #wrap{ height: 100%; width:100%;padding:0px; margin:0px;}
        #main{padding-bottom: 0px;}
        /* 必须使用和footer相同的高度 */
        #footer
        {
            left:0px;
            right:0px;
            position: relative;
            margin-top: -0px; /* footer高度的负值 */
            height: 150px;
            background: #ddd;
            clear: both;
            padding:0px;
        }
        .clearfix:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix
        {
            display: inline-block;
        }
        /* Hides from IE-mac \*/
        * html .clearfix
        {
            height: 1%;
        }
        .clearfix
        {
            display: block;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="main" class="clearfix">
            <div id="content">
                ccc
            </div>
            <div id="side">
                sss
            </div>
        </div>
    </div>
    <div id="footer">
        fff
    </div>
    asdfasdfasdf
    <div style="position:fixed;bottom:0px;right:0px; background-color:Red; width:100%;">
    HHHHHHHHHHHHHH
    </div>
    asdfasdfasd
</body>
</html>