使页面不带滚动条，但使用css底部页脚

如何隐藏滚动条？即使内容为空，滚动条也会出现，但我不想那样做。使页面不带滚动条，但使用css底部页脚

这是我的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:relative在#page_footer和#body_wrapper但它不工作。

我添加了一个DOCTYPE和问题解决但另一个问题出现了：页脚填一个较大的地方： enter image description here

即使我固定的宽度（宽度：40像素）

你有什么想法

来源

2012-12-02 user201892

。是这个问题？ –

我希望当我没有足够的内容时，滚动条不会出现，页面的页脚会出现（在页面的底部），而不会移动滚动条 – user201892

您正在使用哪种浏览器。我检查了Firefox和Opera中的代码。在这些浏览器中查看时，页面中不存在滚动条。 –

自动隐藏滚动条

理念： -

您可以使用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;固定页脚页脚来修复它在浏览器底部。在你的代码 1）添加到您的网页HTML在所有代码顶级

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

    }

其他问题/问题 - ：这个代码添加到你的页面的CSS样式。 2）你用全身颜色较深的颜色使页脚看起来很大。它可以通过设置主体颜色为白色并在容器div之后添加具有较深颜色的标题div来解决。 3）你已经为容器div设置了一个有限的宽度，这使得头部在页面中心看起来更小。它可以通过给容器div 100％宽度和放置一个有限宽度的内部容器div来对齐页面中心来固定。检查这些问题在这里固定的代码： -

发现在zip文件这里主要HTML和CSS样式：http://www.keepandshare.com/doc/5182191/yoursite-zip-2k?da=y

让你想隐藏滚动条我知道，如果它有助于

来源

2012-12-03 07:14:10

我测试了你的建议但它为我另一个问题，像我的脚注文字不留在它的地方... – user201892

感谢您的支持 – user201892

再次非常感谢你 – user201892

使页面不带滚动条，但使用css底部页脚

回答

相关问题