CSS3 부정적인 여백 문제

나는 내 질문이이 사이트에서 여러 번 언급되었음을 안다. 그러나 나는 내 대답을 찾을 수없는 것 같습니다. 내 페이지에 끈적한 바닥 글을 만들려고합니다. 내 페이지는 3 div로 나뉩니다.CSS3 부정적인 여백 문제

최고

중간

바닥. 여기있다 :

html,body { 
    margin: 0; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 14px; 
    height: 100%; 
    margin: 0 auto; 
    position:relative; 
} 

#pageTop { 
    height: 90px; 
} 

#pageMiddle { 

    min-height: 100%; 
    margin-bottom: -50px; 
} 

#pageMiddle:after { 
    content: ""; 
    display: block; 
} 
#pageBottom, #pageMiddle:after { 
    height: 50px; 
}

나는 pageMiddle 분 높이에서 PAGETOP 높이를 제거하는 방법을 이해하지 않습니다. 이것이 문제인 것 같습니다.

이 문제에 대한 도움을 주셔서 감사합니다.

출처

2014-10-21 Richard Moreau

정말 문제를 이해할 수 없습니다. – dippas

나도 마찬가지다. jsFiddle 또는 유사하게 상황을 재현 할 수 있습니까? –

jquery가 필요하면 pageTop에 대한 변수를 만들고 90px를 값으로 사용하고 중간에 CSS 높이를 pageMiddle - pageTop으로 설정하고 pageMiddle에 대해 인라인 높이 CSS로 새 결과 변수를 추가해야합니다. – Nick

안녕하세요. 모든 조언을 해 주셔서 감사합니다. 며칠 후, 나는 결국 대답을 얻었다.

최고
중간
내 바닥 DIV에 끈적 끈적한 바닥 글을 적용하려고했다

바닥 :처럼 위에서 언급 한

, 내가 3 DIV했다. 어떤 성공도없이.

다음은이 문제를 해결하는 방법입니다.

상단 및 중간 div를 래퍼 div에 삽입했습니다. 내 페이지에 단 2 개의 메인 div가 있습니다. 지금이 모양입니다.

래퍼
- 최고
- 중동
바닥 여기

는 CSS입니다 :

#wrapper{ 
    min-height: 100%; 
    margin-bottom: -50px; 
} 
#top { 
    width:1000px; 
    margin:0 auto; 
    height: 90px; 
} 

#middle { 
    width:1000px; 
    margin:0 auto; 
} 

#wrapper:after { 
    content: ""; 
    display: block; 
} 
#bottom, #wrapper:after { 
    width:1000px; 
    height: 50px; 
    margin:0 auto; 
}

그는 다시 내 HTML 템플릿입니다 :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>My title</title> 
<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link rel="stylesheet" href="style/style.css"> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="top">Header</div> 
    <div id="middle">Content</div> 
<div id="bottom">Footer</div> 
</body> 
</html>

그것은 매우 간단합니다.

답장을 보내 주셔서 다시 한번 감사드립니다.

출처

2014-10-26 20:19:29

CSS3 부정적인 여백 문제

답변

관련 문제