我的应用程序中有一个固定的页脚。
当内容大于屏幕高度时,它会向其添加滚动条。但是我无法看到内容的结尾,因为它位于页脚下方并且页脚被固定并不允许我滚动它或看到它。
请注意:页脚的高度实际上是未知的,我在页脚运行时上方创建了其他固定的div。因此,内容应该可以在底部的所有固定div上滚动。
JS小提琴:https://jsfiddle.net/wfck8y8n/
由于固定的页脚,小提琴中的以下代码会被隐藏。
<div>I might get hidden because of footer</div>
如何仅使用CSS显示它?
答案 0 :(得分:0)
将所有内容放入内容包装器并将高度定义为80vh(因为页脚为20vh)。
transactions = mDatabase.child("balance").child("users").child(userid).child("log").orderByChild("In");
&#13;
body {
padding: 0;
}
#footer {
position: fixed;
bottom: 0;
background-color: black;
color: white;
width: 100%;
height: 20vh;
}
.content {
height: 80vh;
}
.content div {
min-height: 120px;
}
&#13;
答案 1 :(得分:0)
当内容变得更大时,你需要推动页脚:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20vh; /*the bottom margin = -(footer's height)*/
}
.push, #footer {
height: 20vh;
}
#footer {
position : fixed;
bottom : 0;
background-color : black;
color : white;
width : 100%;
}
.content div{
min-height: 120px;
}
<div class="wrapper">
<div class="content">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
<div>I might get hidden because of footer</div>
<div>I might get hidden because of footer</div>
<div>I might get hidden because of footer</div>
<div class="push"></div>
</div>
<div id = "footer">
I am footer
</div>
答案 2 :(得分:0)
添加margin-bottom:60vh属性。
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
$(document).ready(function () {
var $url = $(location).attr('href');
if ($url.indexOf('https://test.com/') > -1) {
alert('TEST first');
ga('create', 'UA-XXXXXXXX-6', 'auto');
ga('send', 'pageview');
} else if ($url.indexOf('https://test2.com/') > -1) {
alert('TEST second');
ga('create', 'UA-XXXXXXXX-7', 'auto');
ga('send', 'pageview');
} else if ($url.indexOf('https://test3.com/') > -1) {
alert('TEST third');
ga('create', 'UA-XXXXXXXX-8', 'auto');
ga('send', 'pageview');
} else {
alert('TEST fourth');
ga('create', 'UA-XXXXXXXX-3', 'auto');
ga('send', 'pageview');
}
});
</script>
所以请参考以下示例:
答案 3 :(得分:0)
我想最简单的方法是将div
包裹在除页脚之外的所有部分中,然后在该包装中添加一个margin-bottom
规则,其等于像素的高度页脚。
我制作了Codepen demo,我希望它有所帮助。