CSS 위치 지정 문제

내 CSS에 문제가 있습니다. 원하지 않는 부분이 많은 곳에 있습니다. 내가 원하는 것은 콘텐츠 영역 컨테이너가 페이지 크기로 고정되는 것입니다. 그러나이 문제를 일으키는 원인을 찾지 못했습니다. 주요 내용에 대한CSS 위치 지정 문제

http://jsfiddle.net/k5t5czxt/1/

CSS : 여분의 공백이 당신의 .Clear 요소에 의해 발생

#main-body-area { 
    background-size:cover; 
    background:url(../Images/BluePrint.jpg) no-repeat; 
    background-position:left; 
    position:absolute; 
} 

#main-body-cover { 
    background-color:pink; 
    opacity: 0.75; 
    position: absolute; 
    height: 100% 
} 

#main-body-wrapper { 
    width: 60%; 
    background-color: yellow; 
    margin: 0px auto; 
    opacity: 0.75; 
    border-radius: 20px; 
    height: 95%; 
} 

#main-section { 
    margin: 2%; 
} 


article { 
    background-color:orange; 
    border: 1px solid green; 
    margin: 2%; 
    height: 500px; 
    width: 90%; 
    display: inline-block; 
}

출처

2014-09-06 wgwgag

추가 <div class="Clear" /> 및 <div class="Clear"></div>이 여분의 공백을 생성합니다.

제거하면 공백이 거의 사라집니다. 페이지의 전체 높이가 height: 100% 요소의 결과 인 500 픽셀이므로 여전히 약간의 공백이 남아 있습니다. height:100%을 제거하면 추가 공백이 제거되지만 페이지의 다른 부분에도 부정적인 영향을줍니다.

CSS가 계속 진행되고 있기 때문에이 페이지에서 다시 시작하여 한 번에 한 요소 씩 다시 작성하여 각 요소와 클래스가 레이아웃에 어떤 영향을 미치는지 확인하는 것이 좋습니다.

JS Fiddle Demo

출처

2014-09-06 17:41:39 Dan

그리고 댄, 당신은 당신이 달성하는 것을 위해 방법에게 너무 많은 HTML을 사용하는 말을 구축합니다. 당신은 확실히 그것을 많이 제거 할 수 있습니다. 그리고 왜 당신은 '클리어 (Clear)'를 사용하고 있습니까? 명확한 수정 트릭을 알고 있습니까? Micro clearfix를'# main-content-area'에 추가하면 플로팅 된 모든 자식을 래핑합니다. http://nicolasgallagher.com/micro-clearfix-hack/ –

여기

내 문제에 대한 링크입니다. div height: 100%이 적용됩니다.

출처

2014-09-06 17:39:40

그냥 기사에 대한 CSS를 변경합니다.

article { 
    background-color:orange; 
    border: 1px solid green; 
    margin: 2%; 
    height: 100%; 
    width: 90%; 
    display: inline-block; 
}

여기에서 높이는 500px에서 100 %로 변경됩니다.

JS Fiddle

출처

2014-09-06 17:43:19

CSS 위치 지정 문제

답변

관련 문제