posizione: relativa lascia uno spazio vuoto

Il codice è qui: http://lasers.org.ru/vs/example.html

Come rimuovere uno spazio vuoto sotto il blocco principale (#page)?

Bene, allora non usare il posizionamento relativo. L'elemento occupa ancora spazio dov'era originariamente quando si utilizza il posizionamento relativo e non è possibile liberarsene. Ad esempio, puoi utilizzare il posizionamento assoluto o far fluttuare gli elementi uno accanto all'altro.

Ho giocato un po 'con il layout e ti suggerisco di modificare queste tre regole 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; }

Un altro trucco che ha funzionato bene per me è usare un margine inferiore negativo nell'elemento relativo che hai spostato. Non c'è bisogno di andare con il posizionamento assoluto.

Qualcosa di simile a:

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

Simile (se non identica) alla soluzione che vedo ora, dal verde.

Prova questa regola:

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

Ho cambiato posizione in assoluta, questo ti permette di usare la bottom: 0proprietà.

#page {
  padding-bottom: 0;
}

Ho avuto un problema simile. Il modo più semplice è sostituire la parte superiore margin-topper #page.

Ho avuto lo stesso problema. Il margine negativo non ha funzionato per me in quanto ha lasciato un'enorme area bianca dove era una volta. Ho risolto questo problema nel mio caso inserendo manualmente l'altezza.

.maincontent {
    height: 675px;
}

La mia risposta è in ritardo, ma potrebbe aiutare altri con un problema simile che ho avuto io.

Ho avuto un <div>con position: relative;cui tutti gli elementi figlio hanno lo position: absolute;stile. Ciò ha causato la visualizzazione di circa 20 px di spazio bianco sulla mia pagina.

Per aggirare questo problema ho aggiunto margin-top: -20px;al prossimo elemento di pari livello dopo il <div>con position: relative;.

Se hai già un elemento fratello, puoi usare 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>

Sono stato in grado di sbarazzarmi degli spazi bianchi utilizzando il seguente framework:

Ed ecco il 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>

Questa domanda sembra avere una buona risposta, tuttavia tutte le risposte precedenti hanno avuto effetti collaterali negativi nel mio layout. Questo è ciò che ha funzionato davvero per me:

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

La soluzione migliore se non vuoi lasciare spazi sottostanti (relativi)

Consiste nell'usare margin-top e position: sticky

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