Как скрыть полосы прокрутки? Полоса прокрутки появляется, даже если содержимое пусто, но я этого не хочу.
Вот мой 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"> </div>
</div>
<!-- End of Mavigational Menu -->
<div class="clearthis"> </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"> </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, и проблема решена, но появилась другая проблема: нижний колонтитул занимает большое место: 
даже если я зафиксировал ширину (ширина: 40 пикселей)
у тебя есть идеи
