Doctype이 작동하지 않아야합니다.

-2

doctype에 문제가 있습니다. 내 페이지에 CSS를 추가 할 때 보이지 않습니다. doctype을 제거하면 모든 것이 올바르게 작동합니다. 이유는 무엇입니까Doctype이 작동하지 않아야합니다.

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="header">this is my header 
    </div> 
    <div id="center_content"> 
     <div id="left"> 
     </div><div id="right"></div> 
    </div> 
    <div id="footer">this is my footer 
    </div> 
</div> 
</body> 
</html>

CSS

body 
{ 

margin:0px; 
padding:0px; 

} 
#wrapper 
{ 
height:100%; 
width:100% 
} 
#header 
{ 
width:100%; 
height:20%; 
background-color:red; 
} 
#center_content 
{ 
min-height:79%; 
height:auto; 
background-color:pink; 
overflow:auto; 

} 
#footer 
{ 
height:5%; 
background-color:blue; 
} 
#left 
{ 
float:left; 
min-height:79%; 
height:auto; 
width:20%; 
background-color:brown; 
} 
#right 
{ 
float:right; 
min-height:79%; 
height:auto; 
width:79%; 
background-color:yellow; 

}

출처

2014-04-02 Abhishek

라이브 링크? 당신이 css 링크 –

에 대한 유형을 설정하지 않아도 html5 doctype을 사용하고 있기 때문에 콘솔에서 오류를 확인하십시오. 나는 당신이 표준에서 "should"라는 다른 정의를 가지고 있다고 생각합니다. – BoltClock

빨강, 분홍색 대신 hex/rgb/rgba를 사용하십시오. –

귀하의 문서 타입은 문제가되지 않습니다. % percentage를 사용할 때 부모/조상의 너비와 높이의 백분율을 <html> 및 <body>으로 선언해야 함을 이해하면됩니다.

나는 당신의 CSS를 수정했다. 이 시도. 당신은 문서 타입을 제거 할 때

html, body { 
    margin:0px; 
    padding:0px; 
    width: 100%; 
    height: 100%; 
} 
#wrapper { 
    height:100%; 
    width:100%; 
} 
#header { 
    width:100%; 
    height:20%; 
    background-color:red; 
} 
#center_content { 
    height:79%; 
    background-color:pink; 
    overflow:auto; 
} 
#footer { 
    height:5%; 
    background-color:blue; 
} 
#left { 
    float:left; 
    height:100%; 
    width:20%; 
    background-color:brown; 
} 
#right { 
    float:right; 
    height:100%; 
    width:79%; 
    background-color:yellow; 
}

그래서, 그것은 DOCTYPE없이 잘 렌더링 이유입니다 Quirks Mode에 들어갑니다.

출처

2014-04-02 07:39:25 ralcazar

Doctype이 작동하지 않아야합니다.

답변

관련 문제