konum: göreli boş bir alan bırakır

88

Kod burada: http://lasers.org.ru/vs/example.html

Ana bloğun (#sayfa) altındaki boş bir alan nasıl kaldırılır?

css

— Kir
kaynak

Alt dolguyu mu kastediyorsunuz, yoksa her şeyi dikey olarak ortalamak mı?

— alex

#Page div içindeki metin ile kenarlık arasındaki boşluktan mı bahsediyorsunuz? Aksi takdirde, hangi alandan bahsettiğinizden emin değilim.

— Jeremy Battle

@Jeremy Battle Guffa'nın var gibi görünmesine rağmen ben de çözemiyorum .

— alex

Bu sorunu görmeyen başka kimse var mı?

— Myles Grey

Lütfen [ stackoverflow.com/questions/13722095/… [1] adresinde işaretlenen

— yanıta bakın

36

O zaman göreceli konumlandırma kullanmayın. Öğe, göreceli konumlandırmayı kullanırken başlangıçta olduğu yerde hala yer kaplıyor ve bundan kurtulamazsınız. Örneğin, bunun yerine mutlak konumlandırma kullanabilir veya öğeleri yan yana yüzdürebilirsiniz.

Düzeni biraz oynadım ve bu üç kuralı şu şekilde değiştirmenizi öneririm:

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

27

"ve bundan kurtulamazsınız." - yapabilirsin. Plang'ın cevabında olduğu gibi sadece negatif marj kullanın.

— Michał K

5

@ MichałK: Hayır, bu sadece boş alanı başka bir elementle örtüştüğün anlamına gelir, boş alandan kurtulmak değil. Göreli konumlandırmadan boş alanı öğenin boyutu kadar örtmek için yalnızca negatif kenar boşluklarını kullanabilirsiniz.

— Guffa

@ MichałK: Bu yanıtı ve diğer tamamen ilgisiz yanıtları olumsuz oylamak yardımcı olmaz, yine de göreceli konumlandırmanın neden olduğu boşluktan kurtulamazsınız.

— Guffa

1

@ MichałK: Sadece alanı kaplayabileceğiniz ve ondan kurtulamayacağınız için, onu kaplamak için en az boş alan kadar büyük başka unsurlara sahip olmanız gerekir. Örneğin, 200 piksel yüksekliğinde bir elemandan boş bir alanınız varsa ve deliği kapatmak için yalnızca 100 piksel yüksekliğinde bir elemana sahipseniz, deliğin solunda yine 100 piksel olacaktır.

— Guffa

1

Neden olumsuz oy? Yanlış olduğunu düşündüğünüz şeyin ne olduğunu açıklamazsanız, cevabı iyileştiremez.

— Guffa

183

Benim için iyi çalışan bir başka numara da, taşıdığınız göreceli öğede negatif bir kenar boşluğu kullanmaktır. Mutlak konumlandırmaya gerek yok.

Gibi bir şey:

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

Şimdi gördüğüm çözüme benzer (aynı değilse), yeşilden.

— Plang
kaynak

30

Harika, basit bir cevap. Ve HTML / CSS'nin bir ucube gösterisi olduğunun mükemmel kanıtı.

— Synesso

1

@plang, çalışmıyor gibi görünüyor. Bkz. Jsfiddle.net/u7sq8rL7/1 . Yeşil arka plan, son öğenin ötesine uzanır.

— Pacerier

1

@Pacerier Kenar boşluğu kullanmayın. Açıkça çalışmıyor (bir düşünün); kenar boşluğuna ihtiyacınız var.

— William

2

Bu mükemmel çalışıyor. Ve evet margin-bottomeksi bir sayı ile kullanıyorsunuz çünkü alttaki fazladan boşluktan kurtulmak istiyorsunuz.

— phocks

senin düzen sağlığı yerinde olup olmadığını iyi bir, bu sadece iyi çalışır

— Vitaliy Terziev

8

#page 
{ 
     overflow:hidden; 
}

Snippet'i genişlet

— Carol McKay
kaynak

2

Bu kuralı deneyin:

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

Pozisyonu mutlak olarak değiştirdim, bu bottom: 0özelliği kullanmanıza izin veriyor .

— Salman A
kaynak

1

#page {
  padding-bottom: 0;
}

alt dolgu yok

— Alex
kaynak

Bu doğru cevaptır, ancak bazı dolgulara sahip olmak web'de okumak daha kolay ve daha standart olduğundan dolguyla daha iyi durumda olduğunuzu söyleyebilirim.

— Jeremy Battle

@Jeremy Battle Kesinlikle, dolgu çok daha iyi görünüyor.

— alex

@Kir Aslında mevcut stilinizi doldurma olarak değiştirebilirsiniz: 8px 16px 0px; CSS'nizde fazladan bir satır olmasını önlemek için.

— Jeremy Battle

Sorunun içerik kabının altındaki 300 piksellik boşluk olduğuna inanıyorum, kabın içindeki alan değil ...

— Guffa

Senaryo div (#page) içinde anonim bir kutu yaratacaktır ve CSS spesifikasyonuna göre anonim kutuyu doğrudan kontrol etmenin başka bir yolu yoktur ve bu anonim kutu özelliği üstünden devralacaktır (bu durumda #sayfa). Öyleyse, @alex'in dediği gibi, özelliğini değiştirerek üst div'i değiştirmek daha iyidir. Yukarıdakiler kriterleri karşılamıyorsa, bu senaryoda negatif marj kullanmak da bir çözümdür.

— kta

1

Benzer bir problemim vardı. En kolay yolu üzerindeki üst değiştirmektir margin-topiçin #page.

— yeşil
kaynak

üst + margin-alt yerine negatif değerli margin-top, gitmenin yoludur

— xtian

1

Ben de aynı sorunu yaşadım. Negatif marj, eskiden olduğu yerde büyük bir beyaz alan bıraktığı için benim için işe yaramadı. Bu problemi benim durumumda yüksekliği manuel olarak girerek çözdüm.

.maincontent {
    height: 675px;
}

— UkrVolk11
kaynak

1

Cevabım gecikti, ancak sahip olduğum benzer bir sorunla başkalarına yardımcı olabilir.

Tüm alt öğelerin stile <div>sahip position: relative;olduğu bir yerim vardı position: absolute;. Bu , sayfamda yaklaşık 20 piksel beyaz alanın görünmesine neden oldu .

Eklenen bu I etrafında almak için margin-top: -20px;sonraki kardeş elemana <div>sahip position: relative;.

Daha önce bir kardeş öğeniz varsa, kullanabilirsiniz 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>

Snippet'i genişlet

— Gabriel Gates
kaynak

0

Aşağıdaki çerçeveyi kullanarak beyaz boşluklardan kurtulmayı başardım:

HTML-CSS çerçevesi

Ve işte işaretleme

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

0

Bu soru iyi yanıtlanmış gibi görünüyor - ancak yukarıdaki tüm yanıtların düzenimde kötü yan etkileri oldu. Benim için gerçekten işe yarayan şey buydu:

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

Snippet'i genişlet

— Gerfried
kaynak

0

Aşağıda boşluk bırakmak istemiyorsanız en iyi çözüm (göreceli)

Kenar boşluğu üst ve konum kullanmaktır: yapışkan

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

— ztvmark
kaynak