position:relative laisse un espace vide

Question

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

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

Answer 1

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é. Il n'est pas nécessaire d'utiliser le positionnement absolu.

Quelque chose comme :

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

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

Answer 2

Dans ce cas, n'utilisez pas le positionnement relatif. L'élément occupe toujours l'espace où il se trouvait à l'origine lorsqu'il est positionné de manière relative, et vous ne pouvez pas vous en débarrasser. Vous pouvez par exemple utiliser le positionnement absolu à la place, ou faire en sorte que les éléments flottent l'un à côté de l'autre.

J'ai un peu joué avec la mise en page, et je suggère que vous changiez ces trois règles en :

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

Answer 3

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 absolue, ce qui vous permet d'utiliser la fonction bottom: 0 propriété.

Answer 4

#page {
  padding-bottom: 0;
}

Answer 5

J'ai eu le même problème. La marge négative ne fonctionnait pas pour moi, car elle laissait une énorme zone blanche à l'endroit où elle se trouvait. J'ai résolu ce problème dans mon cas en saisissant manuellement la hauteur.

.maincontent {
    height: 675px;
}