分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 身高问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

<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%;
}

还有另一种方法是在.wrap中@L_541_6@margin：0 auto -50px,并在页面外部放置页脚.

当没有那么多内容时,我需要.principal有100％的高度因为我有一个组件注入.principal a< div style ='height：100％>在这里插入文本和图形/图表< /格取代. 请参阅下面的示例以更好地理解：图1： Content 100%

由于组件,我需要内容(.principal)具有100％的高度.我有一个菜单,点击时打开,应该有内容的大小(.principal),我希望页脚在页面底部.

图2：

Scrolling Content

如果有更多的内容(由于文本或其他东西)我想要一个滚动和页脚消失,标题固定.

图3：

Image

在滚动的底部,它应该显示为页脚.菜单打开时,菜单应具有显示内容大小的高度(在本例中为height = window-height-footer).

所以有一种方法可以使一个元素具有100％的高度,但是当有很多内容时它会扩展？

障碍：

>由于IE8(需要兼容性),我无法使用flexBox模型.
>由于Safari和IE,我无法使用height：calc.
>我不能把所有东西都放在高处：100％因为页脚.
>因为声誉,我无法放置图像.

解决方法

我想这可能就是你要找的东西：

演示：
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;
}