使用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;
}

我想要實現的是，當我沒有足夠的內容時，滾動條應該隱藏並且頁面的頁腳保持可見（在頁面底部（即瀏覽器底部））而不移動滾動條。 我在#page_footer和#body_wrapper測試了幾種樣式，例如： position absolute和position:relative但它不起作用。

我添加了一個 DOCTYPE 並解決了問題，但出現了另一個問題：頁腳填充了一個大地方： 在此處輸入圖片說明

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

你有什么主意嗎

Answer 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

讓我知道它是否有幫助

Answer 2

將此風格添加到您的身體

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

使用css制作沒有滾動條但底部頁腳的頁面

問題描述

2 個解決方案

解決方案1
2 2012-12-03 07:14:10

解決方案2
0

使用css制作沒有滾動條但底部頁腳的頁面

問題描述

2 個解決方案

解決方案1 2 2012-12-03 07:14:10

解決方案2 0

解決方案1
2 2012-12-03 07:14:10

解決方案2
0