在HTML页面底部添加空格 [英] Adding whitespace at bottom of HTML page

查看:181
本文介绍了在HTML页面底部添加空格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试创建一个网站,其中标题栏和页面页脚都固定在一个位置,即标题栏始终在顶部,页脚始终在底部.

I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.

这造成了一个问题,即我需要向上推页面上的内容,以便页面页脚不会与内容重叠. 我需要在内容底部添加一些空间,以便在用户滚动到页面底部时不会发生重叠. 我试图在最底部的DIV中添加margin-bottom css属性,以便在页面底部添加一些空间,这对于使用margin-top css属性的最顶部DIV起作用,但对于底部的DIV不起作用

This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content. I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page. I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.

这是我网站的主要结构,没有内容:

This is the main structure to my website, without content:

<html>
<head>
</head>
<body>
    <div class="CONTAINER">
        <div class="PAGENAVBAR">
        </div>
        <div class='CATEGORYNAVBAR'>
        </div>
        <div class='PAGE_CONTENT'>      
            <div class="LEFTCONTAINER">
            </div>

            <div class="RIGHTCONTAINER">
            </div>
        </div>
        <div class="PAGEFOOTER">
        </div>
    </div>
</body>

有人可以建议一种实现这种效果的方法吗?

Can someone please suggest a method to achieve this effect?

推荐答案

我发现这很有效:

body {
    padding-bottom: 50px;
}

这篇关于在HTML页面底部添加空格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆