la hauteur du corps ne remplit pas 100% de la hauteur de la page

Je ne peux pas comprendre ça. J'ai un simple jeu de divs avec un en-tête, la barre latérale et la zone de contenu. L'en-tête est pleine largeur, le côté et le contenu sont flottaient à gauche.

J'ai besoin de la barre latérale (pour le fond) pour remplir 100% de la hauteur de la page, mais quand j'ai inspecter l'élément dans chrome, le <body> est en fait de long se terminant avant le bas de la page, ce qui semble être un facteur limitant la hauteur de ma barre latérale.

Ce qui est de maintenir la <body> de remplir la page entière ici?

    ​<body>
<div id="head">
</div>
<div id="sidebar">
<div>
<div id="menu">
<ul>
<li><a href="/dashboard.php"><img src="/img/blank.png" alt="home" id="home_ico">Home</a>
</li>
<li class="admin"><a><img src="/img/blank.png" alt="home" id="users_ico">Users</a>
<ul class="submenu" style="display: none;">
<li><a href="/users">Manage users</a></li>
<li><a href="/users/add.php">Add a user</a></li>
</ul>
</li>
<li class=""><a><img src="/img/blank.png" alt="home" id="clients_ico">Clients</a>
<ul class="submenu" style="display: none;">
<li><a href="/client_orgs">Manage clients</a></li>
<li><a href="/client_orgs/add.php" class="admin">Add a client</a></li>
</ul>
</li>
<li class=""><a><img src="/img/blank.png" alt="home" id="projects_ico">Projects</a>
<ul class="submenu" style="display: none;">
<li><a href="/projects">Manage projects</a></li>
<li><a href="/projects/add.php" class="admin">Create a project</a></li>
<li></li>
<li><a href="/projects/submitted.php" class="admin client">Submitted projects</a></li>
<li><a href="/projects/closed.php" class="admin">Closed projects</a></li>
</ul>
</li>
<li class=""><a href="/my_account"><img src="/img/blank.png" alt="home" id="account_ico">Account</a>
</li>
<li class="active"><a href="/help.php"><img src="/img/blank.png" alt="help" id="help_ico">Help</a>
</li>
</ul>
</div>
</div>
</div>    
<div id="body" class="full">
<div id="content">
<!--start block-->
<div class="block">
<h1><img src="/img/blank.png" alt="home" id="help_ico"> Help</h1>
<p>
Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.
</p>
</div>  
</div>   
</body>

CSS:

* {
margin:0;
padding:0;
}
html, body {
height:100%;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 160%;
position: relative;
background: #000;
}
#sidebar{
width: 200px;
background: #000;
height: 100%;
padding-top: 30px;
-webkit-box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);
float: left;
}
#body{
float: left;
padding: 30px 0 30px 40px;
width: 75%;
}

source d'informationauteur TH1981

  1. 36

    Semble que vous avez float:left appliqué sur vos enfants. Utilisez ce code :

    html, body {
overflow: auto;
}
  2. 4

    En cas de doute, la meilleure façon que j'ai trouvée pour s'attaquer à ce est en ajoutant:

    html { overflow-y:scroll; }
  3. 3

    essayez d'ajouter

    body {
min-height: 100%;
}
  4. 3

    Vous semblez être en essayant d'obtenir une mise en page qui s'étend sur toute la hauteur du conteneur - ces dispositions ne sont pas possibles. Vous devriez lire sur le Faux Colonnes CSS technique, une commune de la solution de contournement pour ce problème.

  5. 1

    Il y a deux problèmes:

    Première:

    La largeur de vos éléments est supérieur à 100% de la largeur de la page

    C'est pourquoi votre div id="corps" est coincé en dessous de la barre latérale.

    Essayez de faire de la largeur du corps quelque chose comme 30% et vous devriez voir ce que je veux dire.

    Deuxième:

    hauteur:100% ne fonctionne pas vraiment la façon dont il semble il existe des solutions de contournement pour ce.

    Voici une excellente solution

  6. 1

    Ne sais pas si cela va aider quelqu'un, mais j'ai eu le même problème mais uniquement sur mobile. J'ai découvert qu'il y avait un style html { height: 100%; } qui était à l'origine du corps pour ne pas s'étendre sur toute la hauteur. Une fois que j'ai enlevé le 100% de la hauteur de la balise html, il fixe le corps ne s'étendant pas sur toute la hauteur de la page sur mobile. J'ai toujours 100% de la hauteur de la balise body.