web-dev-qa-db-fra.com

Barre latérale HTML/CSS pleine hauteur

J'ai trouvé beaucoup de discussions et de questions jonchées sur Internet concernant cette question, mais aucune d'entre elles ne semble correspondre à mon cas et les solutions sont très spécifiques à une situation donnée.

J'ai un élément header avec une hauteur de 100px en haut de la page. J'ai un élément div#sidebar flottant à gauche avec une largeur de 250px, et enfin un élément div#main également flottant à gauche.

La hauteur de html, body et div#sidebar est 100%.

Mon objectif est d’obtenir que div#sidebar s’étende jusqu’au bas de la page, quelle que soit la taille du navigateur ou du contenu. Évidemment, si le contenu est plus long que la hauteur de la page visualisable, il devrait agir normalement et cliquer au-delà de la fin de la page, en introduisant des barres de défilement.

Toutefois, dans l’état actuel des choses, il semble que la hauteur de la page ait été calculée comme suit: 100% + 100px, ce qui introduit des barres de défilement, même s’il n’existe aucun contenu susceptible d’envoyer Push div#sidebar. Jusqu'ici, je n'ai trouvé aucune solution qui fonctionne, ou peut-être l'ai-je ratée ou gâchée une solution; Quoi qu'il en soit, je suis dans cette affaire depuis plus d'une heure et je suis sur le point de me déchirer les cheveux.

Existe-t-il une méthode non JavaScript pour que cela fonctionne correctement et empêcher l'ajout de la hauteur de header à 100%?

Voici mon HTML/CSS - bien que j'aie inclus tous les détails pertinents ci-dessus, cela devrait aider.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Awesome Template!</title>
        <link href="./stylesheet.css" rel="stylesheet" />
    </head>
    <body>
        <header id="primary">
            <h1>My Awesome Template!</h1>
        </header>
        <div id="sidebar">
            <h1>Sidebar</h1>
        </div>
        <div id="main">
            <h1>Main</h1>
        </div>
    </body>
</html>

CSS:

html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

body
{
    background: #fff;
    font: 14px/1.333 sans-serif;
    color: #080000;
}

header#primary
{
    width: 100%;
    height: 100px;
    background: #313131;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
    background-image: -moz-linear-gradient(#4d4d4d, #313131);
    background-image: -o-linear-gradient(#4d4d4d, #313131);
    background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
    margin: 0px 0px 0px 20px;
    padding: 0px;
    line-height: 100px;
    color: #ffffff;
}

#sidebar
{
    float: left;
    width: 250px;
    background: #ccc;
    min-height: 100%;
}

#main
{
    float: left;
}
htmlcssheight
11
Steven Zezulak

Vous recherchez la fameuse technique des "fausses colonnes". Voici un tutoriel .

Fondamentalement, vous ne pouvez pas le faire avec une simple couleur de fond, vous devez utiliser une image de fond répétitive.

4
Iterate

J'ai trouvé que la méthode décrite dans cet article était une méthode très simple pour résoudre le problème.

Vous devez entourer votre #sidebar et #main divs avec un autre div, pour que votre code html devienne:

...
<div id="content">
    <div id="sidebar">
        <h1>Sidebar</h1>
    </div>
    <div id="main">
        <h1>Main</h1>
    </div>
</div>
...

et ensuite le css suivant fera quelque chose près de ce que vous voulez:

#content {
    position: relative;
    width: 100%;
}
#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
}
#main {
    position: relative;
    margin-left: 250px;
}

(avec un peu d'ajustements, par exemple, j'ai trouvé que la marge du h1 dans #main semblait être ignorée ... mais la marge du h1 sur #sidebar n'était pas!).

12
Murray Jensen

Si vous ne vous souciez pas de l’Internet inférieur, utilisez display: table sur un parent et display: table-cell sur les éléments. Cela devrait fixer leurs sommets ensemble. En ce qui concerne l’écart, utilisez margin-top: -100 px; padding-top: 100px;

3
Madara Uchiha

Vous ne savez pas si vous avez essayé cela, ou si cela fonctionnera pour vous (je suis novice dans le codage), mais essayez de faire flotter la barre latérale à gauche, de placer le contenu à droite, d'aligner le texte à gauche et d'utiliser des pourcentages pour width.

#sidebar
    {
float: left;
width: 25%;
background: #ccc;
min-height: 100%;
text-align: left;
    }

#main
    {
float: right;
text-align: left;
width: 70%;
    }

Si vous avez d'autres paramètres, vous devrez les aborder différemment, mais cela pourrait fonctionner.

1
Jeff
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

Vous pouvez le faire avec ce code jQuery. Appel de la hauteur du contenu principal.

0
John Louie Biñas