상대 위치 지정으로 인해 여백 아래에 공백이 남았습니까?

Question

나는 코딩에 새로운 경험이있다. 나는 반응 형 웹 사이트를 만드는 법을 배우고 있으며, 가장 큰 화면 해상도에서 바닥 글 아래의 거대한 공백을 제외하고 모든 것이 작동 중입니다. 나는 그것이 "샘플"섹션을 위해 사용한 상대적인 위치 때문이라고 생각합니다. 나는이 질문이 전에 물었다는 것을 알고있다. 나는 그 제안을 시도했지만 그것을 작동시키지 못한다. 상대적인 위치 지정을 사용하지 않고 원하는 부분에서 "샘플"섹션을 얻는 방법을 찾을 수 없습니다. 나는 아무 쓸데없이 "float"을 시도했다.

내 반응 형 페이지의 가장 큰 화면 크기에서 바닥 글 아래의 거대한 공간을 제외하고는 모든 것이 작동합니다.

내 .html 파일과 .css 파일을 여기에 붙여 넣는 대신 여기를 클릭하고 "페이지 소스보기"를 클릭하여 모든 코드를 얻을 수있는 내 사이트입니다. 내 질문을 너무 길게 보이게하고 싶지는 않습니다.

문제의 CSS 파일을 "large.css"라고합니다. 여기

은 : grc198.orijenaldesigns.com

어떤 도움이 많이 주시면 감사하겠습니다!

Answer 1

주요 질문에 표시되는 주요 문제는 몇 가지 요소에 위치하는 대규모 bottom입니다.

나는 당신에게 솔직해질 것입니다. 이 페이지에는 많은 문제로 인해 작업하기가 어렵습니다.

첫째, 높이가 약간 문제가 있습니다. 대부분 em으로 크기를 조정하고 있습니다. 다양한 블록은 높이를 높이거나 낮추지 않습니다. 건물 웹 페이지의 중요한 구성 요소는 유연성입니다. em 수를 변경하지 않고도 고용 기록 및 높이 변경 내용을 적절히 추가하거나 삭제할 수 있어야합니다.

해결책 : 높이를 제거하고 특정 높이를 어딘가에 설정해야하는 경우 px을 사용하십시오.

둘째, 많은 구성 요소를 배치하고 있습니다. 문서와 같은 나무 같은 특성으로 인해 까다로운 위치 지정없이 도달하려는 동작 유형을 매우 쉽게 얻을 수 있습니다.

해결책 : 문제가 발생하지 않는 한 명시 적으로 위치를 지정하지 마십시오.

거친 위치가 지정되지 않은 샘플을 보여 주면서 데모 한 멋진 데모입니다.

http://jsfiddle.net/r5LDJ/

존재하는 것으로 :

<div class="left-section"> </div> 

와 각 컨테이너의 50 %를 커버

<div class="right-section"> </div> 

및 할 상대적를 할 필요가 없습니다 그들을 배치하십시오.당신이 응답 설계에 들어갈 찾고 있다면

, 나는 Mozilla DN