css - 使用css制作没有滚动条但底部有页脚的页面

Question

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

这是我的 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;
}

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

我添加了一个 DOCTYPE 并解决了问题，但出现了另一个问题：页脚填充了一个很大的地方：在此处输入图像描述

即使我固定了宽度，（宽度：40px）

你有什么主意吗

score 2 · Accepted Answer

自动隐藏滚动条

概念：-

您可以使用 CSSoverflow 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

让我知道它是否有帮助

score 0 · Accepted Answer

0

将此样式添加到您的身体

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

于 2018-10-15T08:42:22.600 回答

css - 使用css制作没有滚动条但底部有页脚的页面

2 回答 2

Related

Reference