bootstrap, menu ne descend pas jusqu'en bas par Wousto - page 1

Bonjour !

Je suis sur un projet en ce moment pour le bachelor en informatique, et j'aimerais que mon menu secondaire descende jusqu'au footer. Le problème est que quand je fais par exemple un height 100%, il prend logiquement la taille de l'écran, moi ce que je veux c'est que ça descende bien jusqu'en bas. Je n'ai donc pas d'idée ...

Voici mon code html :

<!DOCTYPE html>
<html>

<?php include("morceaux/visiteur/head.php") ?>

<body>
<?php include("morceaux/visiteur/nav.php") ?>

<div id="menuSecondaire" class="container jumbotron">
    <h1>Menu</h1>
    <a href="classement.php">Classement</a><br>
    <a href="equipes.php">Equipes</a><br>
    <a href="acutualites.php">Actualités</a><br>
    <a href="lives.php">Lives</a><br>
    <a href="videos.php">Vidéos</a><br>
    <a href="tournois=.php">Tournois</a><br>
</div>
<section id="boutique" class="container">
    <article class="row">
        <div class="col-lg-12 twitchTchat alignementBlock">
            <center>
                <iframe src="https://player.twitch.tv/?channel=wousteam" frameborder="0" scrolling="no" class="twitch"></iframe>
                <iframe src="https://www.twitch.tv/wousteam/chat?popout=" frameborder="0" scrolling="no" class="tchat"></iframe>
            </center>
        </div>
    </article>

    <article class="row">
        <div class="jumbotron col-lg-12">
            <h1>Présentation</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam architecto atque cum dignissimos dolores earum eveniet exercitationem fugit hic in maiores obcaecati odit perferendis, placeat, quam quidem totam voluptates?</p>
        </div>
    </article>


    <article id="groupeBlockEquipe" class="row">
        <div id="equipeComp" class="col-lg-5 jumbotron">
            <h1>Equipe(s) compétitive(s)</h1>
            <p>
                <ul>
                    <li><a href="test.php">Wousto</a></li>
                    <li><a href="test.php">Woustiti</a></li>
                    <li><a href="test.php">Woustata</a></li>
                </ul>
                <button class="btn btn-primary">Postuler</button>
            </p>
        </div>

        <div id="equipeFun" class="col-lg-5 jumbotron">
            <h1>Equipe(s) fun(s)</h1>
            <p>
                <ul>
                    <li><a href="test.php">Wousto</a></>
                    <li><a href="test.php">Woustiti</a></li>
                    <li><a href="test.php">Woustata</a></li>
                </ul>
                <button class="btn btn-primary">Postuler</button>
            </p>
        </div>
    </article>

    <article id="video" class="row">
        <div class="col-lg-12">
            <h1 class="centrage">Nos vidéos</h1>
            <div id="lesVidéos">
                <img src="images/vignette.jpg" alt="video" class="redimensionVignetteJeux">
                <img src="images/vignette.jpg" alt="video" class="redimensionVignetteJeux">
                <img src="images/vignette.jpg" alt="video" class="redimensionVignetteJeux">
                <img src="images/vignette.jpg" alt="video" class="redimensionVignetteJeux">
                <img src="images/vignette.jpg" alt="video" class="redimensionVignetteJeux">
                <img src="images/vignette.jpg" alt="video" class="redimensionVignetteJeux">
                <img src="images/vignette.jpg" alt="video" class="redimensionVignetteJeux">
            </div>
        </div>
    </article>

    <article id="twitch" class="row">
        <div class="col-lg-12">
            <h1 class="centrage">Les lives</h1>
            <div id="lesTwitch">
                <img src="images/twitch.png" alt="twitch" class="redimensionVignetteJeux">
                <img src="images/twitch.png" alt="twitch" class="redimensionVignetteJeux">
                <img src="images/twitch.png" alt="twitch" class="redimensionVignetteJeux">
                <img src="images/twitch.png" alt="twitch" class="redimensionVignetteJeux">
                <img src="images/twitch.png" alt="twitch" class="redimensionVignetteJeux">
                <img src="images/twitch.png" alt="twitch" class="redimensionVignetteJeux">
                <img src="images/twitch.png" alt="twitch" class="redimensionVignetteJeux">
            </div>
        </div>
    </article>

    <div class="push"></div>
</section>


<?php include("morceaux/visiteur/footer.php") ?>
</body>
</html>

#menuSecondaire{
	display: inline-block;
	height: 100%;
	width: 20%;
	margin-top: -20px;
}

#boutique{
	display: inline-block;
	width: 79%;
	height: 100%;
	vertical-align: top;
}

-
Edité par Wousto 1 décembre 2016 à 10:37:56

Wousto

1 décembre 2016 à 10:22:36

Être développeur c'est savoir être curieux et savoir rechercher sur internet les bonnes infos

Mon site internet : https://mathieu-marteau.fr/

yoan.tls

1 décembre 2016 à 11:43:19

Qu'il descende en bas ? C'est à dire ?

Tu voudrais avoir le menu qui apparait tout le temps ? Et quand tu descends il suit ?

Si j'ai bien compris, il faut utiliser le règle fixed sur ton menu

#menuSecondaire{
    display: inline-block;
    height: 100%;
    width: 20%;
    margin-top: -20px;
    position: fixed;
}

Rys•sa.Navlys

1 décembre 2016 à 13:41:32

Peut être serait il intéressant d'utiliser l'unité vh plutôt que % ?

bootstrap, menu ne descend pas jusqu'en bas

bootstrap, menu ne descend pas jusqu'en bas

Supprimer

Modérer

Signaler le message aux modérateurs