Position: Relativ lässt einen leeren Raum

Code ist hier: http://lasers.org.ru/vs/example.html

Wie entferne ich einen leeren Raum unter dem Hauptblock (#page)?

Verwenden Sie dann keine relative Positionierung. Das Element nimmt immer noch Platz ein, wo es ursprünglich war, als die relative Positionierung verwendet wurde, und das können Sie nicht loswerden. Sie können stattdessen stattdessen die absolute Positionierung verwenden oder die Elemente nebeneinander schweben lassen.

Ich habe ein bisschen mit dem Layout herumgespielt und schlage vor, dass Sie diese drei Regeln ändern in:

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

Ein weiterer Trick, der für mich gut funktioniert hat, ist die Verwendung eines negativen unteren Randes in dem relativen Element, das Sie verschoben haben. Keine Notwendigkeit, mit absoluter Positionierung zu gehen.

Etwas wie:

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

Ähnlich (wenn nicht identisch) zu der Lösung, die ich jetzt sehe, von grün.

#page {
  padding-bottom: 0;
}

Versuchen Sie diese Regel:

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

Ich habe die Position in absolut geändert, damit Sie die bottom: 0Eigenschaft verwenden können.

Ich hatte ein ähnliches Problem. Der einfachste Weg ist, das Oberteil margin-topfür zu ersetzen #page.

Ich hatte das gleiche Problem. Der negative Rand funktionierte bei mir nicht, da er einen massiven weißen Bereich hinterließ, in dem er sich früher befand. Ich habe dieses Problem in meinem Fall durch manuelle Eingabe der Höhe gelöst.

.maincontent {
    height: 675px;
}

Meine Antwort ist spät, aber es kann anderen bei einem ähnlichen Problem helfen, das ich hatte.

Ich hatte eine <div>mit, position: relative;wo alle untergeordneten Elemente den position: absolute;Stil haben. Dies führte dazu , dass auf meiner Seite etwa 20 Pixel Leerraum angezeigt wurden .

Um dies zu umgehen, habe ich margin-top: -20px;das nächste Geschwisterelement nach dem <div>mit hinzugefügt position: relative;.

Wenn Sie zuvor ein Geschwisterelement haben, können Sie es verwenden 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>

Ich konnte die Leerzeichen mit dem folgenden Framework entfernen:

Und hier ist das Markup

<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>

Diese Frage scheint gut beantwortet zu sein - jedoch hatten alle obigen Antworten schlimme Nebenwirkungen in meinem Layout. Das hat bei mir wirklich funktioniert:

.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>

Die beste Lösung, wenn Sie keine Leerzeichen darunter lassen möchten (relativ)

Ist Rand oben und Position zu verwenden: klebrig

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