예상치 못한 레이아웃의 DOCTYPE

설명 할 수없는 이상한 동작이 있습니다. 코드 시작 부분에 <!DOCTYPE html> 행을 삽입하면 내 페이지의 스크롤 막대가 "main"태그 주위에 있지 않습니다. 이 첫 줄을 제거하면 예상되는 동작이 발생합니다. 왜 그런가요? 여기 내 실수는 무엇입니까?예상치 못한 레이아웃의 DOCTYPE

<!DOCTYPE html> 
 

 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <title>Off Track</title> 
 
    </head> 
 

 
    <body style="margin: 0px; padding:0px;"> 
 
    <header style="background:green; width:100%; height: 50px;"> 
 
    </header> 
 
    <main style="background:red; width:100%; height:calc(100% - 70px); overflow-y: auto"> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
    </main> 
 
    <footer style="background: yellow; width:100%; height:20px;"> 
 
    </footer> 
 
    </body> 
 

 
</html>

NB : 나는 height:calc(100vh - 70px)에 의해 height:calc(100% - 70px)를 교체하면 나는 또한 예상 된 동작을 가지고,하지만 난 vh을 사용하지 않도록합니다.

출처

2017-10-02 Julien Mazars

당신은 "100 % 작동하지 않습니다"(두 개의 서로 다른 문제가 및 "다른 doctypes로 다른 렌더링") 여기에 있습니다. 두 개의 중복 된 (링크 된) 각 질문을 별도로 처리합니다. – Quentin

알아두면 HTML 태그 하나만 가지고 특정 높이를 유지해야합니다. 문제가 해결되어야합니다. –

-1

<!DOCTYPE html> 라인은 아무 관계가 없습니다.

은 당신의 main 요소에 스크롤바를 얻으려면, 당신은 부모 요소에 대한 height: 100% body 및 html을 설정해야합니다

<!DOCTYPE html> 
 

 
<html lang="en" style="height: 100%;"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <title>Off Track</title> 
 
    </head> 
 

 
    <body style="margin: 0px; padding:0px; height: 100%;"> 
 
    <header style="background:green; width:100%; height: 50px;"> 
 
    </header> 
 
    <main style="background:red; width:100%; height:calc(100% - 70px); overflow-y: auto"> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
     bla bla <br> bla bla <br> bla bla <br> bla bla <br> bla bla <br> 
 
    </main> 
 
    <footer style="background: yellow; width:100%; height:20px;"> 
 
    </footer> 
 
    </body> 
 

 
</html>

출처

2017-10-02 15:27:54 Johannes

내가 그 downvote를 얻었습니다. 코드와 결과를 보았습니까? – Johannes

나는 당신을 downvoted 하나 아니에요 ... 당신의 솔루션은 나를 위해 작동, 고마워! –

" 행은 아무 관계가 없습니다."라고 말하면 스트레칭입니다. 위치를 지정하지 않으면 단점 모드로 인해 본문이 뷰포트 높이의 100 %가되므로 높이를 설정하면 html 및 body 요소에 100 %가 필요하지 않습니다. [quirks 모드 표준, 3.6 및 3.7 점] (https://quirks.spec.whatwg.org/#the-html-element-fills-the-viewport-quirk) – Alohci

답변

관련 문제