gpt4 book ai didi

html - 带有 Angular Directive(指令)、路线、 Material 的粘性页脚

转载 作者:行者123 更新时间:2023-11-28 07:45:58 25 4
gpt4 key购买 nike

我正在尝试实现经典的粘性页脚。我正在使用 angular 1.4、ngRoute、ngMaterial 等。我已经尝试过 css 解决方案(设置 wrapper、footer、html、body 100%)以及计算元素高度的 jQuery 函数,但没有一个是完美的。这里注意,我不想给footer设置一定的高度,然后计算剩余空间。我希望它能够响应我的内容。

1) 我们的大多数解决方案,当主要内容区域小于高度时,我可以将其粘贴到底部。在这种情况下,主要内容和页脚(正文)之间有一个空白区域。我可以将 body 的背景颜色设置为 ng-view 的颜色,这样看起来就一样了。我不确定这是否正确。

2) 当主要内容变大时,页脚会丢失(在主要内容后面而不是向下滚动)。这与 Angular Directive(指令)或路线有什么关系,还是我遗漏了其他东西?你可以查看我的plunkr查看。单击“主页”以外的任何选项卡,您会看到一个空白页面,底部有页脚。单击“主页”,页脚丢失。它实际上就在那里,在内容的后面。附:我不想把我所有的代码都放在这里,它太大了。如果您有任何问题,请查看 plunkr 或询问我。

<body class="Site" ng-app="personalWebsite" ng-controller="mainController as main" style="display: flex; flex-flow: column nowrap;">

<div class="Site-content">
<tsafou-nav></tsafou-nav>

<md-content layout-padding ng-view></md-content>
</div>

<footer>
<tsafou-footer></tsafou-footer>
</footer>

</body>

*页脚

<div class="footer">
<p>Design by<span>WOW</span></p>
</div>

我刚刚意识到下面的代码可以在 firefox 上运行,但不能在 chrome 上运行!有人可以确认这一点并提出修复建议吗?

<body class="Site" ng-app="personalWebsite" style="display: flex; flex-flow: column nowrap;">
<div class="Site-content">
<tsafou-nav></tsafou-nav>
<md-content layout-padding="" ng-view=""></md-content>
</div>
<footer>
<tsafou-footer></tsafou-footer>
</footer>

最佳答案

一个选项是使用 bootstrap 粘性页脚 http://getbootstrap.com/examples/sticky-footer-navbar/

关于html - 带有 Angular Directive(指令)、路线、 Material 的粘性页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30689296/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com