내 명성이 언급하기에 충분하지 않기 때문에 대답을한다. 그러나 이것을 답으로 보지 마라. 추가 정보는 나 자신과 마찬가지로 바닥 글과 위치에 문제가 있었다.
페이지를 설정할 때 바닥 글이 항상 절대 위치로 맨 아래에 있고 주 컨테이너 / 래퍼가 상대적 위치로 유지되도록 페이지를 설정할 때.
그런 다음 텍스트 내용과 동일한 내용 (머리글과 바닥 글 사이의 흰색 부분)의 메뉴에 문제가 있음을 발견했습니다. 바닥 글을 절대로 설정하면 바닥 글이 더 이상 유지되지 않습니다.
복잡한 주제를 말하면, 포지셔닝입니다.
내 솔루션, 내 웹 페이지의 '절대'포지션에서 원했던 콘텐츠에 대한 예를 들어 드롭 다운 메뉴를 열 때 실제로는 상대 위치를 지정하고 드롭 다운 아래에 35em을 배치하는 것이 측면으로 밀리지 않았습니다. 메뉴. (35em은 완전히 확장 된 경우 드롭 다운 메뉴의 높이입니다)
그런 다음 Top : -35em. 이전에 내용을 푸시했습니다. 그리고 margin-bottom : -35em을 추가하십시오. 이렇게하면 내용이 드롭 다운 메뉴 "아래"에 있지만 시각적으로 드롭 다운 메뉴와 나란히 있습니다! 바닥 글 아래의 공백은 10m 정도의 여유를 갖습니다. 그래서 이것에 대한 나의 해결책은 다음과 같습니다.
html, body {
margin:0;
padding:0;
height:100%;
}
h1 {
margin:0;
}
#webpage {
position:relative;
min-height:100%;
margin:0;
overflow:auto;
}
#header {
height:5em;
width:100%;
padding:0;
margin:0;
}
#text {
position:relative;
margin-bottom:-32em;
padding-top:2em;
padding-right:2em;
padding-bottom:10em;
background-repeat:no-repeat;
width:70%;
padding-left:auto;
margin-left:auto;
margin-right:auto;
right:10em;
float:right;
top:-32em;
}
#dropdown {
position:absolute;
left:0;
width:20%;
clear:both;
display:block;
position:relative;
top:1em;
height:35em;
}
#footer {
position:absolute;
width:100%;
right:0;
bottom:0;
height:5em;
margin:0;
margin-top:5em;
}
귀하의 질문에 대한 답변은 훌륭하지만 많은 문제가 발생한 후 이것이 매우 좋은 해결책이며 위치 지정 방식을 더 잘 이해하는 방법이라는 것을 알았습니다. 텍스트 내용을 드롭 다운 메뉴 아래에 놓으면 ' 내 텍스트를 옆으로 밀지 마십시오. 텍스트를 절대 위치로 변경하면 바닥 글이 그대로 유지되지 않았습니다. 나는 이것이 더 많은 사람들에게 문제라고 믿을 수 있기 때문에 여기에 추가합니다. 실제로 무슨 일이 일어 났는지, 나는 텍스트를 35ems 내 드롭 다운 아래에 넣습니다.
그런 다음, 나는 시각적으로 서로 바로 옆에, 상대적 위치와 상단을 표시합니다.
음수 값은 때때로 이러한 위치를 더 잘 이해할 때 매우 우수한 기능성으로 과소 평가됩니다.
당연히 고정 위치는 바닥 글의 논리처럼 보였지만 텍스트 또는 내용이 뷰 포트보다 길면 바닥 글이 뷰포트 아래로 내려 가기를 원합니다. 페이지에 내용이 거의 없으면 맨 아래에 머물러 있습니다.
이 설정은 매우 훌륭하게 수정되었으며보다 유동적이고 동적 인 페이지 레이아웃을 위해 'px'가 아닌 'em'을 사용해야합니다! :)
(더 나은 솔루션이있을 수 있지만 이것은 장치뿐만 아니라 크로스 플랫폼에서도 효과적입니다).
