CODEWITHSUNDEEP
csshtmlscrollbarpositioning
user201892
user201892

Reputation: 277

make page without scrollbar but footer in the bottom with css

How do I hide scroll bars? The scroll bar appears even if the content is empty, but I don't want that.

Here is my HTML Code : 

    <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>

And here is the CSS file : 

    * {
    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;
}

What I want to achieve is that when I don't have enough content then, the scroll bars should hide and the footer of the page remains visible (in the bottom of the page(i.e browser bottom)) without moving scroll bar. I tested several styles like : position absolute and position:relative in #page_footer and #body_wrapper but Its not working.

I added a DOCTYPE and the problem is solved but another problem appeared : the footer fill a large place : enter image description here

even if I fixed the width, (width:40px)

do you have any idea

Upvotes: 1

Views: 5675

Answers (2)

user6375824
user6375824

Reputation:

add this style to your body

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

Upvotes: 0

Naeem Ul Wahhab
Naeem Ul Wahhab

Reputation: 2495

Auto Hiding Scroll bars

Concept:-

You can use CSS overflow property to hide the scroll bars. If you apply overflow:hidden on any component of the webpage or on the whole page, the scroll bars will become permanently hidden.

Check this example where scroll bars are visible in a text area.http://jsfiddle.net/qtAqq/1/

Now to hide these scroll bars we will apply overflow:hidden this text area. As you can see the Text is more than the text area but scroll bars are hidden.http://jsfiddle.net/hnyVc/1/.

But We don't want to do that as scroll bars are useful when site has content more than the screen size. So we will use overflow:auto. See this example http://jsfiddle.net/EZr89/

Solution for your Problem:-

As you can see using overflow:auto hides the scroll bars when page has less content and makes scroll bars visible when page has more content than display size. So just add the following code to your page css styles you can auto hide the scroll bars when page has less content:

 html
{
overflow:auto;
}

Fixing Footer at the Browser Bottom You can use postion:fixed; and bottom:0px; on you page footer to fix it at browser bottom. Add this code to your page css styles:-

#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;

    }

Other Issues/Problems in your code 1)Add to your page html at top of all the code. 2)You have coloured the whole body with the darker colour which makes the footer looking big. It can be solved by setting the body color to white and adding a header div with darker color after the container div. 3)You have set a limited width for container div which makes the header look smaller at the center of the page. It could be fixed by giving container div 100% width and placing an inner container div with the limited width to be aligned in center of the page. Check the code with these problems fixed here:-

find main html and css styles in the zip file here: http://www.keepandshare.com/doc/5182191/yoursite-zip-2k?da=y

Let me know if it helps

Upvotes: 2

Related Questions