制作没有滚动条的页面，但在底部使用 CSS 制作页脚答案

【问题标题】：make page without scrollbar but footer in the bottom with css制作没有滚动条的页面，但在底部使用 CSS 制作页脚
【发布时间】：2018-10-15 16:42:22
【问题描述】：

如何隐藏滚动条？即使内容为空，滚动条也会出现，但我不希望这样。

这是我的 HTML 代码：

    <html>
    <head>
{# ... #}
{% block stylesheets %}
            <link href="{{ asset('bundles/gestionconferenceapplication/css/style.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
        </head>
        <body>

            <div id="body_wrapper">
                <div id="container">

                    <!-- Start of Page Header -->

                    <div id="page_header">
                        <h1><span>Photos Site</span></h1>
                    </div>

                    <!-- End of Page Header -->

                    <!-- Start of Navigational Menu -->

                    <div id="nav_menu">

                        <ul>
                            <li id="menu1"><a href="{{ path('_acceuil', {'name': 'khalil comme toujours'}) }}" ><span>Acceuil</span></a></li>
                            <li id="menu2"><a href="#"><span>About Me</span></a></li>
                            <li id="menu3"><a href="{{ path('_creerConference') }}" ><span>Nouvelle Conference</span></a></li>
                            <li id="menu4"><a href="#"><span>Portfolio</span></a></li>
                            <li id="menu5"><a href="#"><span>Contacts</span></a></li>
                            <li id="menu6"><a href="#"><span>Links</span></a></li>
                        </ul>

                        <div class="clearthis">&nbsp;</div>
                    </div>

                    <!-- End of Mavigational Menu -->

                    <div class="clearthis">&nbsp;</div>

                    <!-- Start of Welcome to my Site -->

                    <div id="welcome">

                        <div class="content_header">
                            <h2><span>Welcome to my Site</span></h2>
                        </div>

                        <div class="content">
            {% block content %}

                        {% endblock %}  

                            </div>

                            <div class="clearthis">&nbsp;</div>
                        </div>

                        <!-- End of Welcome to my Site -->

                    </div>
                </div>


                <!-- Start of Page Footer -->

                <div id="page_footer">
                    Web design by <a href="#">Free Website Templates</a>
                </div>

                <!-- End of Page Footer -->

            </body>
        </html>

这是 CSS 文件：

    * {
    margin: 0px;
    padding: 0px;
}

body {
    padding: 80px 0px 0px;
    background: url('../images/background_top.gif') #c4b8a1 repeat-x;
    color: #695d47;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    text-align: center;
}

a {
    color: #695d47;
    background-color: inherit;
    text-decoration: underline;
}

a:hover {
    color: #ab9c7e;
    background-color: inherit;
}
span {
    display: none;
}

img {
    border: none;
}

ul {
    list-style-type: none;
}

li {
    list-style-type: none;
}

p {
    margin: 0px 0px 15px;
    text-align: justify;
    line-height: 15px;
}

.clearthis {
    margin : 0px;
    height : 1px;
    clear : both;
    float : none;
    font-size : 1px;
    line-height : 0px;
    overflow : hidden;
    visibility: hidden;
}


#body_wrapper {
    padding: 5px 0px 10px;
    width: 100%;
    background-color: #fff;
    color: inherit;
    position : relative;
    min-height: 100%;
}

#container {
    margin: 0px auto;
    width: 758px;
    text-align: right;
    padding-bottom: 20px;
    position : relative;
    min-height: 100%;
}

#container .content_header {
    margin: 20px 0px 0px auto;
    width: 730px;
    height: 40px;
    background: url('../images/content_header_bg.gif') repeat-x 0% 0%;
}

#container .content {
    margin: 3px 150px 0px 28px;
    width: 580px;
    text-align: left;

}


/* Page Header */

#page_header {
    background: url('../images/header_leftborder.gif') #fff repeat-y 0% 0%;
    color: #6a604e;
    float: left;
}

#page_header h1 {
    width: 280px;
    height: 125px;
    overflow: hidden;
    background: url('../images/website_title.gif') no-repeat 50% 50%;
}


/* Navigational Menu */

#nav_menu {
    margin-left: 9px;
    padding-left: 19px;
    float: right;
    background: url('../images/header_leftborder.gif') #fff repeat-y 0% 0%;
    color: #b3a386;
    text-align: center;
    font-family: tahoma, arial, sans-serif;
}

#nav_menu a {
    color: #b3a386;
    background: inherit;
}

#mav_menu a:hover {
    color: #857860;
    background: inherit;
}

#nav_menu ul {
    width: 450px;
    height: 125px;
    overflow: hidden;
}

#nav_menu li {
    float: left;
    border-width: 0px 1px 1px 0px;
    border-color: #c1b7a5;
    border-style: solid;
    font-size: 20px;
}

#nav_menu li#menu3, #nav_menu li#menu6 {
    border-right: none;
}

#nav_menu li a {
    display: block;
    width: 149px;
    height: 62px;
    text-decoration: none;
}

#nav_menu li a:hover {
    color: #857860;
    background-color: #f4eee2
}

#nav_menu li a span {
    padding-top: 17px;
    display: block;
}


/* Welcome to my Site */

#welcome .content_header h2 {
    height: 28px;
    background: url('../images/welcome_header.gif') no-repeat 0% 0%;
}

#welcome p {
    width: 420px;
    float: right;
}


/* Page Footer */

#page_footer {
    padding: 9px 10px 6px;
    font-weight: bold;
    float: none;
    clear: both;
    height:40px;



}

#page_footer a:hover {
    background-color: inherit;
    color: #4f4635;
}

我想要实现的是，当我没有足够的内容时，滚动条应该隐藏并且页面的页脚保持可见（在页面底部（即浏览器底部））而不移动滚动条. 我测试了几种样式，例如：#page_footer 和 #body_wrapper 中的 position absolute 和 position:relative，但它不起作用。

我添加了一个 DOCTYPE，问题就解决了但出现了另一个问题：页脚填充一个很大的地方：

即使我固定了宽度，(width:40px)

你有什么想法

【问题讨论】：

你想隐藏滚动条..这是问题吗？
我希望当我没有足够的内容时，滚动条不会出现并且页面的页脚出现（在页面底部）而不移动滚动条
您使用的是哪个浏览器。我已经检查了Firefox和Opera中的代码。在这些浏览器中查看时，您的页面中已经没有滚动条。
检查我对页脚问题的回答的编辑。如果有帮助，请点击勾选接受答案
我很高兴它对您有所帮助 :-) 请勾选/接受我的回答。如果您接受有用的答案，我和其他人将随时准备为您提供帮助

标签： css html scrollbar positioning

【解决方案1】：

自动隐藏滚动条

概念：-

您可以使用 CSS overflow property 隐藏滚动条。如果您在网页的任何组件或整个页面上应用overflow:hidden，滚动条将永久隐藏。

查看这个在文本区域中可见滚动条的示例。http://jsfiddle.net/qtAqq/1/

现在要隐藏这些滚动条，我们将应用overflow:hidden 这个文本区域。如您所见，文本不仅仅是文本区域，但滚动条被隐藏了。http://jsfiddle.net/hnyVc/1/。

但我们不想这样做，因为当网站的内容超过屏幕大小时，滚动条很有用。所以我们将使用overflow:auto。看这个例子http://jsfiddle.net/EZr89/

您的问题的解决方案：-

正如您所见，使用overflow:auto 会在页面内容较少时隐藏滚动条，并在页面内容多于显示大小时使滚动条可见。因此，只需将以下代码添加到您的页面 css 样式中，您就可以在页面内容较少时自动隐藏滚动条：

 html
{
overflow:auto;
}

在浏览器底部固定页脚 您可以在页面页脚上使用postion:fixed; 和bottom:0px; 将其修复在浏览器底部。将此代码添加到您的页面 css 样式中：-

#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
width:100%;
height:40px;
background: url('../images/background_top.gif') #c4b8a1 repeat-x;
    /*Add this Code to fix the footer at browser bottom*/
position:fixed;
bottom:0px;

    }

代码中的其他问题/问题 1）在所有代码的顶部添加到您的页面html。 2）你用较深的颜色为整个身体着色，使页脚看起来很大。可以通过将body颜色设置为白色并在容器div后面添加一个颜色较深的header div来解决。 3）您为容器 div 设置了有限的宽度，这使得页眉在页面中心看起来更小。可以通过为容器 div 提供 100% 宽度并放置一个宽度有限的内部容器 div 以在页面中心对齐来解决此问题。检查这里修复了这些问题的代码：-

在此处的 zip 文件中找到主要的 html 和 css 样式：http://www.keepandshare.com/doc/5182191/yoursite-zip-2k?da=y

如果有帮助请告诉我

【讨论】：

我测试了你的建议，但它给我带来了另一个问题，比如页脚文本没有留在原位......
那些链接不起作用，Cette 页面 Web présente une boucle de redirection。
@user201892 抱歉，这是由于 google 文档。我已经更改了链接现在它应该可以工作了
@user201892 我花了几个小时来解决您的问题。请不要那么自私。如果您接受答案，它也会增加您的声誉分数。以下是您接受答案的方法：meta.stackexchange.com/questions/5234/…

【解决方案2】：

将此样式添加到您的身体

body{
    margin:0px;
    padding:0px;
    overflow:hidden;
}

【讨论】：