position：relativeは空のスペースを残します

86

コードはここにあります：http：//lasers.org.ru/vs/example.html

メインブロック（#page）の下の空きスペースを削除するにはどうすればよいですか？

css

— キール
ソース

あなたは底の詰め物を意味しますか、それとも全体を垂直に中央に置くことを意味しますか？

— アレックス2011年

#page divのテキストと境界線の間のスペースを意味しますか？そうでなければ、あなたが話しているスペースがわかりません。

— ジェレミーバトル

@ジェレミーバトルグッファは持っているようですが、私もそれを理解することはできません。

— アレックス2011年

他の誰かがこの問題を見ていませんか？

— Myles Grey

[でマーク回答をご参照くださいstackoverflow.com/questions/13722095/...を：[1] stackoverflow.com/questions/13722095/...

— Sohel Pathan

34

そうですね、相対的な配置は使用しないでください。要素は、相対配置を使用したときに元の場所を占有するため、それを取り除くことはできません。たとえば、代わりに絶対配置を使用したり、要素を並べて浮かせたりすることができます。

レイアウトを少しいじってみましたが、次の3つのルールを変更することをお勧めします。

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

— グッファ
ソース

27

「そして、あなたはそれを取り除くことはできません。」- あなたはできる。プラングの答えのように、負のマージンを使用するだけです。

— のMichałK

5

@MichałK：いいえ、それは空のスペースを別の要素とオーバーラップすることを意味するだけであり、空のスペースを取り除くことを意味するのではありません。負のマージンのみを使用して、要素のサイズと同じ大きさの相対位置から空のスペースをオーバーラップさせることができます。

— グッファ2013

@MichałK：この回答や他のまったく関係のない回答に反対票を投じても効果はありませんが、相対的な位置付けによって生じたスペースを取り除くことはできません。

— グッファ2013

1

@MichałK：スペースをカバーすることしかできず、それを取り除くことはできないので、それをカバーするために、少なくとも空のスペースと同じ大きさの他の要素が必要です。たとえば、高さが200ピクセルの要素に空きスペースがあり、穴を覆うために高さが100ピクセルの要素しかない場合でも、穴の残りは100ピクセルになります。

— guffa 2013

1

なぜ反対票を投じるのですか？あなたが間違っていると思うことが何であるかを説明しなければ、それは答えを改善することはできません。

— グッファ2013年

180

私にとってうまく機能したもう1つのトリックは、移動した相対要素に負のマージンボトムを使用することです。絶対的なポジショニングを行う必要はありません。

何かのようなもの：

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

緑から、私が今見ている解決策に似ています（同一ではないにしても）。

— プランク
ソース

27

素晴らしく、簡単な答え。そして、HTML / CSSが見世物小屋であることの完璧な証拠。

— Synesso 2013

1

@plang、動作していないようです。jsfiddle.net/u7sq8rL7/1を参照してください。緑の背景は最後の要素を超えています。

— Pacerier 2014年

1

@ Paceriermargin-bottomを使用しないでください。それは明らかに機能しません（それについて考えてください）。マージントップが必要です。

— ウィリアム

2

これは完全に機能します。そして、はいmargin-bottom、下部の余分なスペースを取り除きたいので、マイナスの数で使用します。

— phocks 2016

良いものです。レイアウトが正常であれば、これは問題なく機能します

— Vitaliy Terziev 2017

8

#page 
{ 
     overflow:hidden; 
}

スニペットを展開

— キャロルマッケイ
ソース

1

#page {
  padding-bottom: 0;
}

下部のパディングなし

— アレックス
ソース

これは正解ですが、パディングを使用する方が読みやすく、Webでより標準的であるため、パディングを使用した方がよいと思います。

— ジェレミーバトル

@ジェレミーバトル間違いなく、パディングははるかに良く見えます。

— アレックス2011年

@Kir実際には、現在のスタイルをパディングに変更するだけです。8px16px 0px; CSSに余分な行がないようにします。

— ジェレミーバトル

問題となっているのはコンテンツコンテナの下の300pxのスペースであり、コンテナ内のスペースではないと

— 思い

シナリオはdiv（#page）内に匿名ボックスを作成し、CSS仕様によれば、匿名ボックスを直接制御する他の方法はなく、この匿名ボックスはその親（この場合は#page）からプロパティを継承します。@alexが言うように、プロパティを変更して親divを変更することをお勧めします。上記が基準を満たしていない場合は、負のマージンを使用することもこのシナリオの解決策です。

— kta 2013年

1

このルールを試してください：

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

位置を絶対に変更しbottom: 0ました。これにより、プロパティを使用できるようになります。

— サルマンA
ソース

1

私も同様の問題を抱えていました。最も簡単な方法は、のトップを置き換えることmargin-topです#page。

— 緑
ソース

top + margin-bottomではなく、負の値のmargin-topが進むべき道です

— xtian

1

私も同じ問題を抱えていました。負のマージンは、以前はあった場所に大きな白い領域が残っていたため、私には機能しませんでした。私の場合、手動で高さを入力することでこの問題を解決しました。

.maincontent {
    height: 675px;
}

— UkrVolk11
ソース

1

私の答えは遅れていますが、それは私が持っていたのと同様の問題で他の人を助けるかもしれません。

私が持っていた<div>とのposition: relative;すべての子要素を持っているposition: absolute;スタイルを。これは約20pxを引き起こしましたの空白が私のページに表示されました。

これを回避するためmargin-top: -20px;に、<div>withの後に次の兄弟要素を追加しましたposition: relative;。

以前に兄弟要素がある場合は、 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>

スニペットを展開

— ガブリエルゲイツ
ソース

0

次のフレームワークを使用して、空白を取り除くことができました。

HTML-CSSフレームワーク

そしてここにマークアップがあります

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

— アベル・カレホ
ソース

0

この質問はよく答えられているようですが、上記のすべての答えは私のレイアウトに悪い副作用をもたらしました。これは私にとって本当にうまくいったことです：

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

スニペットを展開

— ガーフリード
ソース

0

下にスペースを残したくない場合の最良の解決策（相対的）

マージントップと位置を使用することです：スティッキー

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

— ztvmark
ソース