web-dev-qa-db-fra.com

débordement: masqué en ignorant le remplissage inférieur

Dans l'exemple suivant, le remplissage inférieur est ignoré et le texte passe au bas de l'élément avant de se masquer. Qu'est-ce qui cause ça?

<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px;">
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
</div>

Une vue avec Firebug (le violet représente le rembourrage, le bleu représente la zone de contenu réelle):

Firebug

htmlcssxhtml
18
James Skidmore

Je préfère utiliser le moins possible de <div>s.

<div class="container">
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
</div>

.container{
  padding: 30px 30px 0;
  position: relative;
  width: 240px;
  height: 170px;
  border:1px solid #000;
  overflow: hidden;
}
.container:after{
  content: ' ';
  display: block;
  background-color: red;
  height: 30px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

http://jsfiddle.net/bgaR9/

naturellement dans un monde sans IE <9

16
Marco Melluso

Le remplissage inférieur existe mais le contenu abaisse le remplissage inférieur et n'est pas visible à cause du débordement: hidden. Ce que vous pouvez faire est de placer le contenu dans un conteneur comme ceci:

<div style="overflow:hidden; width: 300px; height: 200px; border:1px solid #000; ">
    <div style="overflow:hidden; width:auto; height:140px; border:30px solid #ff0000;">
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
    </div>
</div>

Vous pouvez jouer avec le violon ici - http://jsfiddle.net/BMZeS/

J'espère que cela t'aides.

10
Sagar Patil

Je suis un peu en retard dans le jeu, mais Padding rend le contenu interne identique à la zone de contenu (c'est l'une des raisons pour lesquelles il est différent d'une bordure ou d'une marge).

En savoir plus sur le modèle de boîte

Vous le remarquerez plus clairement si vous définissez des couleurs d'arrière-plan ou des images d'arrière-plan sur des divs avec remplissage. La couleur/l'image d'arrière-plan s'étend au-delà de la partie contenu et apparaît à l'intérieur de la zone de remplissage.

La solution consiste à définir une marge à la place. ou une combinaison d'un rembourrage et d'une marge (où il n'y a pas de remplissage inférieur, mais plutôt une marge inférieure de même hauteur).

<div style="overflow: hidden; width: 300px; height: 100px; margin:50px;">
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
</div>

http://jsfiddle.net/Uhg38/

4
isick

Je ne pense pas que vous obtiendrez l'effet que vous recherchez sans ajouter une 2ème div. 

http://jsfiddle.net/Mxhzf/

(couleur de fond ajoutée pour clarifier ce qui se passe)

HTML:  

<div id="outer">
    <div id="inner">

        <!-- CONTENT HERE -->

    </div>
</div>

CSS:  

#outer{
     width: 300px;  
     height: 300px; 
    padding: 20px;
}

#inner{
     width: 300px;
    height: 300px;
    overflow: hidden;
}
3
James Montagne

Si votre CSS utilise padding-bottom et overflow:hidden ensemble, le problème que vous décrivez sera provoqué.

La meilleure solution est:

<div style="padding: 50px; border:1px solid #000">
    <div style="overflow: hidden; width: 300px; height: 100px;">
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
    </div>
</div>

Cliquez ici pour une démonstration en direct

1
Dailey

Le débordement n'a rien à voir avec le remplissage. Le rembourrage s'apparente davantage à une "frontière interne" dans ce cas. Si vous souhaitez que le débordement soit masqué, vous devez modifier la taille réelle de votre boîte et utiliser plutôt une marge inférieure de 0px. Les débordements apparaîtront toujours dans votre remplissage.

alias:

<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px 50px 0 50px; margin-bottom:0px;">
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
</div>

Le rembourrage et les marges vont toujours comme ça en CSS: en haut à droite en bas à gauche (dans cet ordre)

Si n'importe quelle valeur est 0px, vous pouvez simplement utiliser un zéro. Comme:

padding:0;

ou:

padding: 0 10px 0 0;

Toute valeur autre que zéro doit être spécifiée avec px, em ou pt.

0
jhilgert00

J'ai trouvé que le moyen le plus simple était d'ajouter un élément entre le parent et l'enfant avec

overflow:hidden;
height:100%;

http://jsfiddle.net/va78jsm5/2/

Ensuite, je n'ai pas eu à m'inquiéter de faire correspondre la hauteur/marge de l'élément central.

0
user984003

Je sais que c'est un peu vieux maintenant, mais j'ai récemment eu ce problème et je l'ai corrigé en ajoutant une division interne supplémentaire avec une marge.

.promo {
    height: 100px;
    width: 300px;
    border: 1px solid black;    
    padding: 0px 10px;
    overflow: hidden;
}

.inner {
    height: 86px;
    width: 100%;
    margin: 7px 0px;
    overflow: hidden;
}

.promo .inner p {
    padding 0;
    margin: 0;
}

http://jsfiddle.net/7xhuF/1/

0
Tim

envelopper le contenu dans une div avec une propriété de clip!

vérifier la réponse de holdin @ Comment puis-je forcer le débordement: caché pour ne pas utiliser mon espace de remplissage

0
Vic