절대 / 상대 위치 문제

일리 케 바나나

아래는 제가 작업중인 코드입니다. 보시다시피 '#parent'div와 '#child'div가 있습니다. '#child'div는 높이가 정의되지 않았습니다. 이는 때때로 '#child'의 높이가 아래에 적힌 '400px'인 부모의 높이보다 작거나 길기 때문입니다. 내가 얻는 문제는 아이의 키가 #parents 키보다 길 때마다 #child의 콘텐츠가 겹치거나 부모의 랩 외부로 전달된다는 것입니다.

<style>
  #parent{
    position: relative;
    height: 400px;
    width: 500px;
  }

  #child{
    position: absolute;
    top: 0px;
    right: 0px; 
  }
</style>

<div id="parent">
   <div id="child">
      //Some content
   </div>
</div>
미셸

오버플로 콘텐츠를 #child숨기려면 다음을 사용하세요.

#parent {
  overflow: hidden;
}

여전히에서 모든 콘텐츠를 볼 수 있도록하려면 #child스크롤바에 포함 할 수 있습니다. 그러면의 높이 #child가의 높이와 충돌하지 않습니다 #parent.

#parent {
  overflow: auto;
}

편집하다:

당신이 원하는 경우 #parent와 스트레칭의 높이를 #child, #child절대 위치 할 수 없습니다. 그것을 벗으면 작동 할 것입니다. 높이를 400px 이상으로하려면 다음을 사용할 수 있습니다.

#parent {
   min-height: 400px;
}

바이올린 참조 : http://jsfiddle.net/VYrLh/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

상대 및 절대 위치 문제

분류에서Dev

절대적 위치 문제

분류에서Dev

상대적 위치 문제

분류에서Dev

CSS-절대 위치 문제

분류에서Dev

제대로 작동하지 않는 상대 위치 내 절대 위치

분류에서Dev

CSS 상대 위치와 절대 위치

분류에서Dev

절대 위치 상속

분류에서Dev

위치 상대 목록 항목 내부의 절대 div 위치-클리핑 문제-IE7

분류에서Dev

"위치 : 상대 / 절대"를 사용하지 않고 이미지 위에 제목

분류에서Dev

절대 div의 위치 지정 및 고정 스크롤 문제

분류에서Dev

CSS 전환, 절대 위치 및 : target 관련 문제

분류에서Dev

절대 위치는 IE / Chrome에 문제를 일으 킵니다

분류에서Dev

절대 위치 탐색 화살표 문제

분류에서Dev

CSS-Mozilla 절대 위치 전체 너비 문제

분류에서Dev

작은 화면에서 절대 위치 레이아웃 문제

분류에서Dev

jQuery : mouseup + 위치 : 절대 + show (). IE의 문제

분류에서Dev

svg가 위치 : 절대 일 때 Firefox의 팝 오버 문제

분류에서Dev

메뉴의 절대 및 상대 위치

분류에서Dev

메뉴의 절대 및 상대 위치

분류에서Dev

위치 상대 div 내 절대?

분류에서Dev

Html 절대 위치

분류에서Dev

상대 위치 내부 절대 위치는 부모에 요소 범위를 제공합니다.

분류에서Dev

상위 절대 Z- 색인 내부 절대 하위 위치

분류에서Dev

상대 / 절대 경로 문제

분류에서Dev

Meteor : 상대 / 절대 경로 문제

분류에서Dev

절대 브레이크 상위 위치

분류에서Dev

상대 상위 (Chrome 32.0.1700.77) 내부에 절대 위치 입력 요소가있는 Chrome CSS 문제 오른쪽 : 0이 작동하지 않음

분류에서Dev

상대 위치 내부의 절대 위치?

분류에서Dev

상대 상위 모서리에서 절대 위치 div 중단

Related 관련 기사

뜨겁다태그

보관