Question

我有关于身高的问题。我有一个页脚跟随下面的代码：

<html>
<body>
    <div class='wrap'>
        <div class=principal></div>
        <div class='clear'></div>
        <footer><img alt='Logotype' /></footer>
    </div>      
</body>
</html>


html,body{
    height:100%;
};

.wrap{
    height:auto!important;
    height:100%;
    min-height:100%;
    width:100%;
}

.clear{
    clear:both;
}

footer{
    position:absolute;
    bottom:0;
    height:50px;
    width:100%;
}

还有另一种方法是将保证金：0。auto -50px放在.wrap中，并将页脚放在包装外。

我需要.principal才能拥有100％的高度，因为我有一个组件可以在.principal中注入一个<div style='height:100%>insert text and graphics/charts here</div>。

请参阅下面的示例以便更好地理解：

图片1：

Content 100%

由于组件，我需要内容（.principal）具有100％的高度。我有一个单击时打开的菜单，它应该具有内容的大小（.principal），我希望页脚位于页面底部。

图片2：

Scrolling Content

如果有更多内容（由于文字或其他内容），我想要滚动并且页脚消失，标题已修复。

图片3：

Image

在滚动的底部，它应显示为页脚。菜单打开时，菜单应具有显示内容大小的高度（在本例中为height = window-height-footer）。

所以元素可以有100％的高度，但是当它有很多内容时，它会扩展吗？

障碍：

由于IE8 +（需要兼容性），我无法使用flexbox模型。
由于Safari和IE，我无法使用height：calc。
我不能把所有东西都放在高处：100％因为页脚。
由于声誉，我无法放置图片。

Answer 1

我认为这可能是您正在寻找的：

演示： http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/

这是一个简单的脚本，它会让你的页脚粘在页面的底部，但是一旦你添加了更多的内容，它就会随之而来。（演示）

这是使用此脚本的示例：（我还添加了固定导航） HTML：

<div id="wrapper">

    <div id="header">
        <div id="nav"></div>
        <div id="content_push" style="width: 100%; height: 50px;"></div> <!-- makes sure the first content doesn't dissapear beneeth the nav>
    </div><!-- #header -->

    <div id="content">
        Copy this to add content<br><br><br><br>
        Copy this to add content<br><br><br><br>
        Copy this to add content<br><br><br><br>
        Copy this to add content<br><br><br><br>
    </div><!-- #content -->

    <div id="footer">
    </div><!-- #footer -->

</div><!-- #wrapper -->

的CSS：

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:0px;

}
#nav{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: green;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

尝试一下：https://jsfiddle.net/krjoqfru/

Answer 2

我不知道我是否理解正确。你不粘脚？

html, body { height: 100%; }
#wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; }
#footer, #push { margin: 0 auto; height: 50px; }

<body>
  <div id="wrap">
    your content goes here
    <div id="push"></div>
  </div>
  <div id="footer">Your footer</div>
</body>

Answer 3

我希望这可以帮到你。

* { margin: 0; padding: 0; }	
body { height:100%; width: 100%; position: absolute; }
header { height: 50px; width: 100%; position: fixed; }
.principal { min-height: 100%; width: 100%; }
footer { height:50px; width:100%; }

<header style="background: green;"></header>
<div class='principal' style="background: red;"></div>	
<footer style="background: blue;"></footer>

身高问题

3 个答案: