Html 基于最小高度的CSS页脚固定位置_Html_Css

Html 基于最小高度的CSS页脚固定位置

html css

Html 基于最小高度的CSS页脚固定位置,html,css,Html,Css,我看了这里和各种教程，但不能达到我需要的效果因此，如果页面内容的高度低于600px，我希望页脚固定在一个容器下面，这个容器的高度就是这个高度但是，如果内容将容器高度增加到600px以上，则容器应将页脚向下推我试着使用最小高度，我的html如下所示 <body> <div id="shell"> <div id="container"> Content </div> <div id="footer">Footer</div&g

我看了这里和各种教程，但不能达到我需要的效果

因此，如果页面内容的高度低于600px，我希望页脚固定在一个容器下面，这个容器的高度就是这个高度

但是，如果内容将容器高度增加到600px以上，则容器应将页脚向下推

我试着使用最小高度，我的html如下所示

<body>
<div id="shell">
<div id="container">
Content
</div>
<div id="footer">Footer</div>
</div>
</body>


内容
页脚

我不想麻烦发布CSS，因为它只是不接近。

我知道您尝试了

min height

，但为什么这不合适

#container
{
    background:#08e;
    min-height:600px;  
}


#footer
{
    background:#ddd;
}

你可以通过CSS技巧做到这一点

/*CSS代码*/

body, html{
    padding:0;
    margin:0;
    height:100%;
}

.wrapper{
    min-height:100%;
    position:relative;
}

.container{
    width:960px;
    margin:0 auto;
    padding-bottom:100px;
}

.header{
    height:100px;
    background-color:#066;
}

.footer{
    position:absolute;
    bottom:0;
    height:100px;
    background-color:#006;
    width:100%;
}

<div class="wrapper">
    <div class="container">

        <div class="header">
            Header
        </div>

        <div class="body">

        </div>


    </div>

    <div class="footer">
        Footer
    </div>

</div>


标题
页脚

这是我的

uhh，显示css是你问题的核心。你必须使用JS。身体高度需要有一个固定的最小高度，这适用于任何高度