CSS fenêtre d'affichage de la hauteur:100vh ne fonctionne pas correctement avec le contenu de la div

Je suis nouveau ici et inscrit parce que je n'arrivais pas à trouver ma réponse dans les bandes de roulement.

Je suis en train de faire un site web d'une page, et je veux la "landing page" pour avoir un historique complet. J'ai eu l'arrière-plan sur l'ensemble de la page, mais quand j'ai commencé à placer le texte dans le div, il s'est cassé. J'ai utilisé le code css suivant (sass):

.intro {
    color: #fff;
    height: 100vh;
    background: url('http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg') no-repeat center center; 
    background-size: cover;

    &--buttons {
        position: absolute;
        bottom: 2em;
    }
}

p.hello {
    margin: 30px;
}

.page1 {
    color: #fff;
    height: 100vh;
    background: beige;
}

.page2 {
    color: #fff;
    height: 100vh;
    background: black;
}

Avec le code HTML suivant:

<html>
    <head>
        <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
        <title>My title</title>
    </head>

    <body>
        <div class="container">
            <div class="row">

                <div id="intro" class="intro">

                    <div class="text-center">
                        <p class="hello">
                            Intro text is coming soon!
                        </p>
                            <div class="col small-col-12 intro--buttons">
                                <p>Buttons coming here.
                                </p>
                            </div>
                    </div>

                </div>

                <div id="page1" class="col col-12 page1">
                    <p>Tekst test</p>
                </div>

                <div id="page2" class="col col-12 page2">
                    <p>Tekst test.</p>
                </div>

            </div>
        </div>
    </body>
</html>

Vous pouvez voir le résultat ici: http://codepen.io/Luchadora/full/waYzMZ
Ou voir ma plume: http://codepen.io/Luchadora/pen/waYzMZ

Comme vous le voyez, lors du positionnement de l'intro du texte (p.hello {margin: 30px;}, le fond de la taille a changé et n'est pas en plein écran plus. (Btw: j'ai utilisé un exemple d'arrière-plan). Aussi les autres pages ont des espaces blancs maintenant..

Comment puis-je résoudre ce problème? J'ai lu des articles sur les fenêtres, mais je pense que la seule chose dont j'ai besoin pour cela est height: 100vh;, droit? Merci à l'avance!

OriginalL'auteur Luchadora | 2015-07-24

  1. 4

    Votre problème est avec l'effondrement de la marge:

    Parent et le premier/dernier enfant

    Si il n'y a pas de bordure, remplissage, contenu en ligne, ou que l'autorisation de séparer le margin-top de un bloc avec le margin-top de son premier enfant bloquer, ou de no border, padding, du contenu en ligne, height, min-height, ou max-hauteur de séparer la marge inférieure d'un bloc à la marge en bas de son dernier enfant, ces marges s'effondrer. L'effondrement de la marge se termine à l'extérieur de la mère.

    Pour résoudre votre problème, ajouter un peu de rembourrage à .text-center:

    .text-center {padding:1px;}

    Mise à jour du stylet

    Merci, cela fonctionne! En fin de compte j'ai juste ajouté le {padding:1px;} à la div avec l'arrière-plan (le".intro' de la classe), qui fonctionne aussi. Au moins, sur ma version sur le bureau, mais pas dans le Codepen exemple. Mais maintenant, j'ai une barre de défilement horizontale, et overflow-x:hidden ne fonctionne pas, je suis toujours en pensant à nos qui. Est-ce grave si je place le {padding:1px;} sur le p ou sur le intro div?
    ah ok, si vous avez défini une largeur et un rembourrage supplémentaire, le remplissage sera ajoutée à la largeur (par exemple 100% + 2px). pour contourner ce problème, vous pouvez ajouter box-sizing: border-box - cela signifie que tout rembourrage sera inclus dans la largeur. Le rembourrage doit aller sur l'élément enveloppant les p (ou l'un de ses parents)
    merci pour la solution et une explication! En fin de compte je l'ai réparé avec une overflow-x:hidden sur les deux html, body dans le css.

    OriginalL'auteur Pete

  2. 0

    Vous n'avez pas désactivé la marge du corps. Ajouter ceci dans votre CSS

    body{
  margin:0px;
}

    edit: La réponse Pete posté semble être la solution complète, désolé a été trop lent!

    OriginalL'auteur Luuk van Aggelen

  3. -1

    Cela a déjà été dit ci-dessus dans un côté de la conversation, mais il a travaillé pour moi et je veux que les gens à trouver facilement.

    -- overflow-x:hidden; on both html, body in the css.

    OriginalL'auteur Alexander McNulty