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: and position:relativein #page_footerand #body_wrapperbutのようないくつかのスタイルをテストしましたが、うまくいきません。

DOCTYPE を追加して問題は解決しましたが、別の問題が発生しました: フッターが大きな場所を埋めます: ここに画像の説明を入力

幅を固定しても (幅:40px)

何か考えはありますか

score 2 · Accepted Answer

スクロールバーの自動非表示

概念：-

CSSoverflow propertyを使用して、スクロールバーを非表示にすることができます。overflow:hiddenWeb ページのいずれかのコンポーネントまたはページ全体に適用すると、スクロールバーは完全に非表示になります。

テキスト領域にスクロールバーが表示されているこの例を確認してください。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)フッターが大きく見える濃い色で全身を彩色しました。ボディカラーを白に設定し、コンテナdivの後に濃い色のヘッダーdivを追加することで解決できます。3) コンテナ div の幅を制限して、ページの中央でヘッダーが小さく見えるように設定しました。コンテナ div に 100% の幅を与え、制限された幅の内部コンテナ div をページの中央に配置することで修正できます。ここでこれらの問題が修正されたコードを確認してください:-

ここの zip ファイルでメインの html および css スタイルを見つけてください: http://www.keepandshare.com/doc/5182191/yoursite-zip-2k?da=y

それが役立つかどうか教えてください

css - スクロールバーのないページを作成しますが、CSSで下部にフッターを作成します

2 に答える 2

Related

Reference