position: relative laisse un espace vide

87

Le code est ici: http://lasers.org.ru/vs/example.html

Comment supprimer un espace vide sous le bloc principal (#page)?

Kir
la source
Vous voulez dire le rembourrage inférieur, ou avoir le tout centré verticalement?
alex
Voulez-vous dire l'espace entre le texte dans la #page div et la bordure? Sinon, je ne sais pas de quel espace vous parlez.
Jeremy Battle
@Jeremy Battle Je ne peux pas le comprendre non plus, bien que Guffa semble l'avoir fait .
alex
Quelqu'un d'autre ne voit pas ce problème?
Myles Gray
Veuillez vous référer à la réponse marquée sur [ stackoverflow.com/questions/13722095/… [1]: stackoverflow.com/questions/13722095/…
Sohel Pathan

Réponses:

35

Eh bien, n'utilisez pas de positionnement relatif alors. L'élément occupe toujours de l'espace là où il était à l'origine lors de l'utilisation du positionnement relatif, et vous ne pouvez pas vous en débarrasser. Vous pouvez par exemple utiliser le positionnement absolu à la place ou faire flotter les éléments les uns à côté des autres.

J'ai un peu joué avec la mise en page et je vous suggère de changer ces trois règles pour:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }
Guffa
la source
27
"et vous ne pouvez pas vous en débarrasser." - vous pouvez. Utilisez simplement une marge négative, comme dans la réponse du plang.
Michał K
5
@ MichałK: Non, cela signifie seulement que vous superposez l'espace vide avec un autre élément, pas que vous vous débarrassez de l'espace vide. Vous ne pouvez utiliser que des marges négatives pour chevaucher l'espace vide du positionnement relatif avec autant que la taille de l'élément.
Guffa
@ MichałK: Le vote défavorable de cette réponse et d'autres réponses totalement indépendantes n'aide pas, vous ne pouvez toujours pas vous débarrasser de l'espace causé par le positionnement relatif.
Guffa
1
@ MichałK: Comme vous ne pouvez couvrir que l'espace et ne pas vous en débarrasser, vous devez avoir d'autres éléments au moins aussi grands que l'espace vide pour le couvrir. Si, par exemple, vous disposez d'un espace vide d'un élément de 200 px de haut et que vous n'avez qu'un élément de 100 px de haut pour couvrir le trou, vous aurez toujours 100 px à gauche du trou.
Guffa
1
Pourquoi le vote négatif? Si vous n'expliquez pas ce que vous pensez être faux, cela ne peut pas améliorer la réponse.
Guffa
181

Une autre astuce qui a bien fonctionné pour moi est d'utiliser une marge inférieure négative dans l'élément relatif que vous avez déplacé. Pas besoin d'aller avec un positionnement absolu.

Quelque chose comme:

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;

Similaire (sinon identique) à la solution que je vois maintenant, du vert.

plang
la source
28
Une bonne réponse simple. Et la preuve parfaite que HTML / CSS est un freakshow.
Synesso du
1
@plang, ne semble pas fonctionner. Voir jsfiddle.net/u7sq8rL7/1 . Le fond vert s'étend au-delà du dernier élément.
Pacerier
1
@Pacerier N'utilisez pas margin-bottom. Cela ne fonctionne évidemment pas (pensez-y); vous avez besoin de margin-top.
William le
2
Cela fonctionne parfaitement. Et oui, vous utilisez margin-bottomavec un nombre moins parce que vous voulez vous débarrasser de l'espace supplémentaire en bas.
phocks
bon, si votre mise en page est en bonne santé cela fonctionnera très bien
Vitaliy Terziev
1
#page {
  padding-bottom: 0;
}

pas de rembourrage inférieur

Alex
la source
C'est la bonne réponse mais je dirais que vous êtes probablement mieux avec le rembourrage car il est plus facile à lire et plus standard sur le Web d'avoir du rembourrage.
Jeremy Battle
@Jeremy Battle Certainement, le rembourrage est beaucoup mieux.
alex
@Kir Vous pouvez en fait simplement modifier votre style actuel en padding: 8px 16px 0px; pour éviter d'avoir une ligne supplémentaire dans votre CSS.
Jeremy Battle
Je crois que c'est l'espace 300px sous le conteneur de contenu qui est le problème, pas l'espace à l'intérieur du conteneur ...
Guffa
Le scénario créera une boîte anonyme à l'intérieur du div (#page) et selon la spécification CSS, il n'y a pas d'autre moyen de contrôler la boîte anonyme directement et cette boîte anonyme héritera de la propriété de son parent (dans ce cas #page). Il vaut donc mieux changer le div parent en changeant sa propriété comme le dit @alex. Si ce qui précède ne répond pas aux critères, l'utilisation d'une marge négative est également une solution dans ce scénario.
kta
1

Essayez cette règle:

#page {
  border: 2px solid #404241;
  bottom: 0;
  padding: 8px 16px;
  position: absolute;
  top: 70px;
  width: 600px;
}

J'ai changé de position en absolu, cela vous permet d'utiliser la bottom: 0propriété.

Salman A
la source
1

J'avais un problème similaire. Le moyen le plus simple est de remplacer le dessus margin-toppar #page.

vert
la source
margin-top avec une valeur négative, au lieu de top + margin-bottom, est la voie à suivre
xtian
1

J'ai eu le même problème. La marge négative n'a pas fonctionné pour moi car elle a laissé une zone blanche massive là où elle se trouvait. J'ai résolu ce problème dans mon cas en entrant manuellement la hauteur.

.maincontent {
    height: 675px;
}
UkrVolk11
la source
1

Ma réponse est tardive, mais cela peut aider d'autres personnes avec un problème similaire que j'ai eu.

J'ai eu un <div>avec position: relative;où tous les éléments enfants ont le position: absolute;style. Cela a fait apparaître environ 20 pixels d'espace blanc sur ma page.

Pour contourner cela, j'ai ajouté margin-top: -20px;à l'élément frère suivant après le <div>avec position: relative;.

Si vous avez déjà un élément frère, vous pouvez utiliser margin-bottom: -20px;

section {
  height: 200px;
}
<h2>Extra Whitespace</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-top</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div style="margin-top:-20px;">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-bottom</h2>
<section>
  <div style="margin-bottom:-20px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>

Gabriel Gates
la source
0

J'ai pu me débarrasser des espaces blancs en utilisant le framework suivant:

Cadre HTML-CSS

Et voici le balisage

<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
    <div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>
Abel Callejo
la source
0

Cette question semble avoir bien répondu - cependant toutes les réponses ci-dessus ont eu de mauvais effets secondaires dans ma mise en page. C'est ce qui a vraiment fonctionné pour moi:

.moveUp {
    position: relative;
}
.moveUp > * {
    position: absolute;
    width: 100%;
    top: -75px;
}

/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
    height: 100px;
    color: white;
}
.box1 {
    background: red;
}
.box2 {
    background: blue;
    height: 50px;
}
.box3 {
    background: green;
}
<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>

Gerfried
la source
0

La meilleure solution si vous ne voulez pas laisser d'espaces en dessous (relatif)

Est d'utiliser margin-top et position: sticky

#page {
     margin-top: -280px;
     position: sticky;
}
ztvmark
la source