position : relative는 빈 공간을 남깁니다.

88

코드는 여기에 있습니다 : http://lasers.org.ru/vs/example.html

메인 블록 (#page) 아래의 빈 공간을 제거하는 방법은 무엇입니까?

css

— Kir
소스

하단 패딩을 의미합니까, 아니면 전체를 수직으로 가운데에 두는 것입니까?

— 알렉스

#page div의 텍스트와 테두리 사이의 공간을 의미합니까? 그렇지 않으면 당신이 말하는 공간이 무엇인지 잘 모르겠습니다.

— 제레미 전투

@Jeremy Battle Guffa가 가지고있는 것 같지만 나도 그것을 알아낼 수 없습니다 .

— alex

이 문제를 보지 못하는 사람이 있습니까?

— Myles Gray

[ stackoverflow.com/questions/13722095/…에 표시된 답변을 참조하십시오. [1] : stackoverflow.com/questions/13722095/…

— Sohel Pathan

36

그럼 상대 위치를 사용하지 마세요. 요소는 상대 위치를 사용할 때 원래 있던 공간을 여전히 차지하므로 제거 할 수 없습니다. 예를 들어 절대 위치 지정을 대신 사용하거나 요소를 서로 옆에 떠있게 만들 수 있습니다.

나는 레이아웃을 약간 가지고 놀았고이 세 가지 규칙을 다음과 같이 변경하는 것이 좋습니다.

#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

"그리고 당신은 그것을 제거 할 수 없습니다." -할 수 있습니다. plang의 대답과 같이 음수 여백을 사용하십시오.

— Michał K

5

@ MichałK : 아니오, 그것은 단지 당신이 다른 요소와 빈 공간을 겹친다는 것을 의미합니다. 당신이 빈 공간을 제거한다는 것은 아닙니다. 요소의 크기만큼 상대적 위치에서 빈 공간을 겹치려면 음수 여백 만 사용할 수 있습니다.

— Guffa 2013

@ MichałK :이 답변과 전혀 관련이없는 다른 답변에 반대표를 던지는 것은 도움이되지 않습니다. 여전히 상대적 위치에 따른 공간을 제거 할 수 없습니다.

— Guffa 2013

1

@ MichałK : 공간을 덮을 수만 있고 제거 할 수 없기 때문에 공간을 덮을 수있는 최소한의 빈 공간만큼 큰 다른 요소가 있어야합니다. 예를 들어 높이가 200px 인 요소의 빈 공간이 있고 구멍을 덮기 위해 높이가 100px 인 요소 만있는 경우에도 구멍의 왼쪽은 100px입니다.

— Guffa 2013

1

왜 반대 투표입니까? 자신이 틀렸다고 생각하는 것이 무엇인지 설명하지 않으면 답을 개선 할 수 없습니다.

— Guffa

183

나를 위해 잘 작동하는 또 다른 트릭은 이동 한 상대 요소에 음의 여백 하단을 사용하는 것입니다. 절대 위치를 지정할 필요가 없습니다.

다음과 같은 것 :

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

녹색에서 지금 보는 솔루션과 유사합니다 (동일하지 않은 경우).

— 계획
소스

30

훌륭하고 간단한 대답입니다. 그리고 HTML / CSS가 freakshow라는 완벽한 증거입니다.

— Synesso 2013 년

1

@plang, 작동하지 않는 것 같습니다. jsfiddle.net/u7sq8rL7/1을 참조하십시오 . 녹색 배경은 마지막 요소를 넘어 확장됩니다.

— Pacerier

1

@Pacerier margin-bottom을 사용하지 마십시오. 그것은 분명히 작동하지 않습니다 (생각하십시오). 여백이 필요합니다.

— William

2

이것은 완벽하게 작동합니다. 그리고 네 margin-bottom, 아래쪽에 여분의 공간을 없애고 싶기 때문에 마이너스 숫자와 함께 사용 합니다.

— phocks

레이아웃이 좋은 상태에있는 경우 좋은, 이것은 잘 작동합니다

— 비탈리 테르 지에프에게

8

#page 
{ 
     overflow:hidden; 
}

스 니펫 확장

— 캐롤 맥케이
소스

2

이 규칙을 시도하십시오.

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

위치를 절대로 변경하여 bottom: 0속성 을 사용할 수 있습니다.

— 살만 A
소스

1

#page {
  padding-bottom: 0;
}

하단 패딩 없음

— 알렉스
소스

이것은 정답이지만 패딩을 사용하는 것이 읽기 쉽고 웹에서 더 표준 적이기 때문에 패딩을 사용하는 것이 더 낫다고 말할 수 있습니다.

— Jeremy Battle

@Jeremy Battle 확실히 패딩이 훨씬 좋아 보입니다.

— 알렉스

@Kir 실제로 현재 스타일을 패딩으로 수정할 수 있습니다. 8px 16px 0px; CSS에 추가 줄이 생기지 않도록합니다.

— 제레미 전투

나는 그것이 ... 문제가 아닌 컨테이너 내부의 공간 인 콘텐츠 컨테이너 아래 300 픽셀 공간 믿습니다

— Guffa

시나리오는 div (#page) 내부에 익명 상자를 만들고 CSS 사양에 따라 익명 상자를 직접 제어 할 수있는 다른 방법이 없으며이 익명 상자는 부모 (이 경우 #page)에서 속성을 상속합니다. @alex가 말한 것처럼 속성을 변경하여 부모 div를 변경하는 것이 좋습니다. 위의 내용이 기준을 충족하지 않는 경우 마이너스 마진을 사용하는 것도이 시나리오의 해결책입니다.

— kta 2013 년

1

비슷한 문제가있었습니다. 가장 쉬운 방법은에 정상을 교체하는 것입니다 margin-top에 대한 #page.

— 초록
소스

top + margin-bottom 대신에 음수 값을 가진 margin-top

— 이가

1

나는 같은 문제가 있었다. 네거티브 마진은 예전에는 거대한 흰색 영역을 남겼 기 때문에 저에게 효과가 없었습니다. 필자의 경우 높이를 수동으로 입력하여이 문제를 해결했습니다.

.maincontent {
    height: 675px;
}

— UkrVolk11
소스

1

내 대답은 늦었지만 비슷한 문제로 다른 사람들에게 도움이 될 수 있습니다.

나는 모든 자식 요소가 스타일을 <div>가진 position: relative;곳을 가졌습니다 position: absolute;. 이로 인해 내 페이지 에 약 20px 의 공백이 나타납니다.

이 문제를 해결하기 위해 with margin-top: -20px;뒤에 다음 형제 요소를 추가 했습니다 .<div>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>

스 니펫 확장

— Gerfried
소스

0

아래에 공백을 남기지 않으려는 경우 최상의 솔루션 (상대적)

margin-top 및 position : sticky를 사용하는 것입니다.

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

— ztvmark
소스