Position: Relativ lässt einen leeren Raum

84

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

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

Kir
quelle
Du meinst die untere Polsterung oder das Ganze vertikal zentrieren zu lassen?
Alex
Meinen Sie den Abstand zwischen dem Text in der #page div und dem Rand? Ansonsten bin ich mir nicht sicher, über welchen Raum Sie sprechen.
Jeremy Battle
@ Jeremy Battle Ich kann es auch nicht herausfinden, obwohl Guffa es zu haben scheint .
Alex
Hat noch jemand dieses Problem nicht gesehen?
Myles Gray
Bitte beziehen Sie sich auf die Antwort unter [ stackoverflow.com/questions/13722095/… [1]: stackoverflow.com/questions/13722095/…
Sohel Pathan

Antworten:

33

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; }
Guffa
quelle
27
"und du kannst das nicht loswerden." - du kannst. Verwenden Sie einfach einen negativen Rand, wie in der Antwort des Plangs.
Michał K
5
@ MichałK: Nein, das bedeutet nur, dass Sie den leeren Raum mit einem anderen Element überlappen, nicht, dass Sie den leeren Raum loswerden. Sie können nur negative Ränder verwenden, um den leeren Raum von der relativen Positionierung mit der Größe des Elements zu überlappen.
Guffa
@ MichałK: Das Herunterstimmen dieser Antwort und anderer völlig unabhängiger Antworten hilft nicht, Sie können den durch die relative Positionierung verursachten Platz immer noch nicht loswerden.
Guffa
1
@ MichałK: Da Sie den Raum nur abdecken und nicht loswerden können, müssen Sie andere Elemente haben, die mindestens so groß sind wie der leere Raum, um ihn abzudecken. Wenn Sie beispielsweise einen leeren Raum von einem Element mit einer Höhe von 200 Pixel haben und nur ein Element mit einer Höhe von 100 Pixel haben, um das Loch abzudecken, haben Sie immer noch 100 Pixel von dem Loch übrig.
Guffa
1
Warum das Downvote? Wenn Sie nicht erklären, was Sie für falsch halten, kann dies die Antwort nicht verbessern.
Guffa
174

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.

plang
quelle
27
Eine großartige, einfache Antwort. Und der perfekte Beweis dafür, dass HTML / CSS eine Freakshow ist.
Synesso
1
@plang, scheint nicht zu funktionieren. Siehe jsfiddle.net/u7sq8rL7/1 . Der grüne Hintergrund erstreckt sich über das letzte Element hinaus.
Pacerier
1
@Pacerier Verwenden Sie keinen Rand unten. Es funktioniert offensichtlich nicht (denken Sie darüber nach); Sie brauchen Rand oben.
William
2
Das funktioniert perfekt. Und ja, Sie verwenden margin-bottomeine Minuszahl, weil Sie den zusätzlichen Platz unten entfernen möchten.
Phocks
gut, wenn Ihr Layout bei guter Gesundheit ist, wird dies gut funktionieren
Vitaliy Terziev
1
#page {
  padding-bottom: 0;
}

Keine Bodenpolsterung

Alex
quelle
Dies ist die richtige Antwort, aber ich würde sagen, dass Sie mit der Polsterung wahrscheinlich besser dran sind, da sie leichter zu lesen und im Web standardisierter ist, um eine Polsterung zu haben.
Jeremy Battle
@ Jeremy Battle Auf jeden Fall sieht die Polsterung viel besser aus.
Alex
@Kir Sie können Ihren aktuellen Stil einfach so ändern, dass er aufgefüllt wird: 8px 16px 0px; um zu vermeiden, dass Ihr CSS eine zusätzliche Zeile enthält.
Jeremy Battle
Ich glaube, es ist der 300px-Raum unter dem Inhaltscontainer, der das Problem darstellt, nicht der Platz innerhalb des Containers ...
Guffa
Das Szenario erstellt eine anonyme Box innerhalb der div (#page) und gemäß der CSS-Spezifikation gibt es keine andere Möglichkeit, die anonyme Box direkt zu steuern, und diese anonyme Box erbt die Eigenschaft von ihrer übergeordneten Box (in diesem Fall #page). Es ist also besser, das übergeordnete div zu ändern, indem Sie seine Eigenschaft ändern, wie @alex sagt. Wenn das oben Gesagte die Kriterien nicht erfüllt, ist die Verwendung einer negativen Marge auch in diesem Szenario eine Lösung.
kta
1

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.

Salman A.
quelle
1

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

Grün
quelle
Rand oben mit negativem Wert anstelle von oben + Rand unten ist der
richtige
1

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;
}
UkrVolk11
quelle
1

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>

Gabriel Gates
quelle
0

Ich konnte die Leerzeichen mit dem folgenden Framework entfernen:

HTML-CSS-Framework

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>
Abel Callejo
quelle
0

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>

Gerfried
quelle
0

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;
}
ztvmark
quelle