CSS 수직 위치 지정 : 상대 상단 + 절대 하단

임의의 높이의 요소가 앞에 오는 div를 정의해야하지만 접기의 하단까지 나머지 공간을 채워야합니다.CSS 수직 위치 지정 : 상대 상단 + 절대 하단

내가 이것을하는 것에 대해 생각한 방법은 상대적으로 상단과 하단을 절대 위치로 배치하는 것이지만 CSS에서도 가능한지 확실하지 않습니다.

#header { 
 
    border: 1px solid green; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
#fill-the-fold { 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    height: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
}

<div id="header"></div> 
 
<div id="fill-the-fold"></div>

는 기본적으로, 빨간 컨테이너가 녹색 아래 시작 페이지 하단에 공간을 채우기 위해합니다.

이를 수행하는 방법에 대한 도움이 있거나 더 쉬운 방법이 있다면 많은 도움이됩니다.

출처

2015-02-02 vastur

마진 트릭을 적용하여 목적을 달성 할 수 있습니다. JSFiddle

HTML :

<div id="header"></div> 
<div id="fill-the-fold"> 
    <div id="content"> 

    </div> 
</div>

CSS :

html,body{ margin:0px; height:100%;} 
div{ 
    box-sizing: border-box; 
} 
#header { 
    border: 1px solid green; 
    width: 100%; 
    height: 100px; 
} 

#fill-the-fold { 
    margin-top: -100px; /* shifting it covers head */ 
    padding-top: 100px; /* shifting the content under the head */ 
    height: 100%; 
} 

#content{ 
    border: 1px solid red; 
    height: 100%; 
}

머리 후에 당신의 빨간 테두리 부분을 추가, 음의 차이로를 이동. 그런 다음 실제 내용을 내부 내용으로 작성하십시오.

출처

2015-02-02 03:33:06 Ire

나는 본다. 그것은 좋은 트릭입니다, 유일한 것은 여전히 당신이 선행 요소 (100px)의 높이를 알도록 강요합니다. 제 경우에는 그렇지 않습니다. 그것들은 임의의 높이 일 수 있습니다. – vastur

또한 절대 위치에있는 빨간색 요소의 '상단 : 100 픽셀'을 사용하여 동일한 결과를 얻을 수 있다고 생각합니다. 그러나 언급했듯이, 나는 우리가 100px 높이를 모른다고 가정하고 싶다. – vastur

글쎄, 내가 알다시피, 남아있는 임의의 높이를 채울 방법이 없다. 희망을 다른 사람이 우리에게 이것을 달성하는 방법을 보여줄 수 있습니다. :) – Ire

이 답변은 here입니다.

가능하면 짧은 시간 안에 플렉스 박스를 사용하십시오. 주요 항목 :

당신은 #fill-the-fold에 flex-grow: 1를 추가 flex-direction: column
와 함께, 당신이 div의 주위에 인 flexbox 래퍼가 필요합니다.

위의 링크에서 언급되지 않은 또 다른 가능성은 두 번째 div를 지나치게 크게하고 래퍼 (fiddle)로 바닥을 잘라내는 것입니다. 이것은 두 번째 div의 맨 아래를 잃어 버릴 염려가없는 경우에만 분명히 좋습니다.

출처

2017-08-18 12:32:20

CSS 수직 위치 지정 : 상대 상단 + 절대 하단

답변

관련 문제