Position: feuilles par rapport un espace vide


54

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

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

  0

Vous voulez dire que le rembourrage inférieur, ou d'avoir le tout centré verticalement? 08 mars. 112011-03-08 06:27:21

  0

Voulez-vous dire l'espace entre le texte dans le div # page et la frontière? Sinon, je ne suis pas sûr de l'espace dont vous parlez. 08 mars. 112011-03-08 06:29:27

  0

@Jeremy Battle Je ne peux pas comprendre non plus, bien que [Guffa semble avoir] (http://stackoverflow.com/questions/5229081/positionrelative-leaves-an-empty-space/5229122#5229122). 08 mars. 112011-03-08 06:30:48

  0

Quelqu'un d'autre ne voit pas ce problème? 08 mars. 112011-03-08 06:32:16

25

Eh bien, n'utilisez pas de positionnement relatif alors. L'élément occupe toujours l'espace 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 ou faire flotter les éléments les uns à côté des autres.

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

#layout { width: 636px; margin: 0 auto; } 
#menu { position: absolute; width: 160px; margin-left: 160px; } 
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; } 
+13

"et vous ne pouvez pas vous débarrasser de ça." - vous pouvez. Utilisez simplement une marge négative, comme dans la réponse du plang. 16 avril. 132013-04-16 19:02:43

+4

@ MichałK: Non, cela signifie seulement que vous superposez l'espace vide avec un autre élément, pas que vous vous débarrassiez de l'espace vide. Vous pouvez uniquement utiliser des marges négatives pour chevaucher l'espace vide du positionnement relatif avec autant que la taille de l'élément. 16 avril. 132013-04-16 20:05:28

  0

@ MichałK: Downvoting 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. 16 avril. 132013-04-16 20:45:01

  0

Je suis désolé, je ne peux pas révoquer la downvote sauf si vous éditez votre répondeur. Mais pour être honnête, je ne comprends pas vraiment votre commentaire. Dans ma situation, cela a très bien fonctionné (même sémantiquement). Si les éléments sont les uns sous les autres et que vous en repositionnez un, vous pouvez utiliser une marge négative pour vous débarrasser de l'espace occupé précédemment par l'élément 'relatif'. 17 avril. 132013-04-17 06:04:41

+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 aussi grands que l'espace vide pour le couvrir. Si vous avez par exemple un espace vide d'un élément de 200 pixels de haut et que vous n'avez qu'un élément de 100 pixels de haut pour couvrir le trou, vous aurez toujours 100 pixels à gauche du trou. 17 avril. 132013-04-17 07:00:48

  0

@ MichałK: Je l'ai déjà édité. 17 avril. 132013-04-17 21:24:29

+1

Pourquoi la downvote? Si vous n'expliquez pas ce que vous pensez être faux, cela ne peut pas améliorer la réponse. 07 mai. 132013-05-07 15:59:34


1
#page { 
    padding-bottom: 0; 
} 

no bottom padding

  0

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 pour avoir un rembourrage. 08 mars. 112011-03-08 06:30:59

  0

@Jeremy Battle Certainement, le rembourrage semble beaucoup mieux. 08 mars. 112011-03-08 06:31:57

  0

@Kir Vous pouvez simplement modifier votre style actuel pour le remplissage: 8px 16px 0px; pour éviter d'avoir une ligne supplémentaire dans votre CSS. 08 mars. 112011-03-08 06:32:57

  0

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 ... 08 mars. 112011-03-08 06:45:52

  0

Le scénario va créer une boîte anonyme à l'intérieur de la div (#page) et selon la spécification CSS il n'y a pas d'autre façon 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 est donc préférable de changer la div parente 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. 08 mai. 132013-05-08 02:51:50


1

Essayez cette règle:

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

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


0

J'ai eu un problème similaire. Le moyen le plus simple est de remplacer le haut sur margin-top pour #page.


117

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

Quelque chose comme:

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

similaires (voire identique) à la solution que je vois maintenant, du vert.

+17

Une excellente réponse simple. Et la preuve parfaite que HTML/CSS est un monstre. 28 sept.. 132013-09-28 13:09:35

+1

@plang, ne semble pas fonctionner. Voir http://jsfiddle.net/u7sq8rL7/1/. Le fond vert s'étend au-delà du dernier élément. 09 oct.. 142014-10-09 09:51:36

+1

@Pacerier Ne pas utiliser margin-bottom. Cela ne marche évidemment pas (pensez-y); vous avez besoin de marge supérieure. 04 janv.. 162016-01-04 22:39:47

+2

Cela fonctionne parfaitement. Et oui vous utilisez 'margin-bottom' avec un nombre moins parce que vous voulez vous débarrasser de l'espace supplémentaire en bas. 08 févr.. 162016-02-08 03:36:05

  0

bon, si votre mise en page est en bonne santé cela fonctionnera très bien 21 avril. 172017-04-21 06:25:47

  0

Merci, donc résolu mon problème! 25 avril. 172017-04-25 13:10:58

  0

J'utilise quelque chose comme ceci et le dépassement: caché comme Carol McKay mentionné ci-dessous et il a fonctionné avec les derniers navigateurs en décembre 2017 02 déc.. 172017-12-02 19:37:14


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 était. J'ai résolu ce problème dans mon cas en entrant manuellement la hauteur.

.maincontent { 
    height: 675px; 
} 

0

j'ai pu se débarrasser des espaces blancs en utilisant le cadre suivant:

HTML-CSS framework

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> 

3

#page 
 
{ 
 
    overflow:hidden; 
 
}


0

Cette question semble avoir une bonne réponse - 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>