CSS 크기 지정자 크기 조정 요소가 지정된 크기 이상으로 지정됩니다.

CSS에서는 왜 이런 일이 발생하는지 전혀 이해하지 못했습니다. 그러나 margin-top:50%을 지정할 때마다 요소가 페이지 아래쪽으로 밀려납니다. 페이지. 나는 50 %로 가정 할 것이고, 요소는 페이지의 중간에 위치 할 것이다.CSS 크기 지정자 크기 조정 요소가 지정된 크기 이상으로 지정됩니다.

요소의 너비 및 높이 특성을 설정하는 경우에도 마찬가지입니다. div의 너비를 100 %로 설정하면 div의 오른쪽이 표시 가능한 화면에서 벗어나서 스크롤해야 볼 수 있습니다.

왜 그런 일이 발생하고이를 해결할 수있는 방법이 있습니까?

편집 :

가 여기 내 CSS 코드입니다. 나는 또한 부트 스트랩을 사용하고 있지만 이것은 부트 스트랩 외부에서 발견 한 문제입니다.

html{ 
height:100%; 
min-height: 100%; 
min-width: 100%; 
} 
#button_container{ 
width:100%; 
clear:both; 
margin:0 auto; 
margin-top: 25%; 
} 

#donate_section, #contrib_section{ 
display:inline; 
} 
#contrib_section{ 
float:right; 
}

보일러 플레이트 HTML 마크 업 :

<body> 
    <div id="someid"> 
     <div> 
      <a></a> 
     </div> 
     <div> 
      <a></a> 
     </div> 
    </div> 
</body>

출처

2013-02-17 barndog

야생적인 추측을 피하기 위해 코드의 모든 예가 답을 찾는 데 도움이됩니다. 패딩, 위치, 테이블 수 있습니다 ... – Nebril

그래, 난 그냥 내 CSS 코드를 추가했습니다. – barndog

이를 읽은 다음 다시 읽기 : 당신의 '폭'설정은 컨텐츠 섹션을 설정하는 것입니다 http://www.w3schools.com/css/css_boxmodel.asp

- 그래서 당신의 전체 폭은 content + margin + padding + border. 따라서 너비 = 50 % 인 경우, 보통 (작은 여백/패딩/경계선)을 사용하면 55 % 정도가됩니다. div를 외부 적으로 50 % 만 사용하려면 외부에 50 %가 아닌 패딩/여백/경계선 div 또는 기타 여러 가지 솔루션이 필요합니다.

브라우저 렌더링이 완벽하지 않다는 사실을 처리했을 수도 있습니다. 스크롤을 피하려면 일반적으로 폭의 100 %를 사용하지 않아야합니다. (당신이 그 학교를 따라 간다면 좋은 "Web 2.0"디자인이기도합니다. 은 유용성/가독성 측면에서 공백이있는이어야합니다).

편집 : 또한 %는 너비 ()와 관련이 있으며 높이가 아닙니다. 예를 들어 CSS fluid layout: margin-top based on percentage grows when container width increases을 참조하십시오.

출처

2013-02-17 03:40:38 Joe

좋습니다. 100 % 사용하지 않는 한 공정합니다. 하지만 50 %라고 말하면 90 %가되어야한다고 생각합니다. 그 부분은 의미가 없습니다. – barndog

죄송 합니다만 90 %가 아니어야합니다. 나는 고정 된 위치를 설정했고 고정되어있는 것으로 보인다. 내가 그렇게 할 때 div는 페이지의 중간에 위치합니다. 위치를 고정하지 않으면 div가 페이지 아래쪽에 표시됩니다. 아직 확실하지 않은 이유. – barndog

아마도 내 편집은 왜 ... 높이가 아닌 너비에 상대적입니다. 상단/하단과 같은 '높음'항목에 대해서도 마찬가지입니다. – Joe

참조는 종종 부모 요소와 "상대적"입니다. 당신이 몸 꼬리표의 첫번째 아이에 대해서 말하면 않는 한.

출처

2013-02-17 03:41:02 ajameswolf

예, body 태그의 첫 번째 하위 태그입니다. 두 div를 보유하고있는 div는 각각 내부에 링크가 있습니다. – barndog

CSS 크기 지정자 크기 조정 요소가 지정된 크기 이상으로 지정됩니다.

답변

관련 문제