予期せぬレイアウトの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％機能していない」（二つの異なる問題を抱えていますと "異なるドームタイプの異なるレンダリング"）を参照してください。 2つの重複（リンク）は、それぞれの質問を別々にカバーします。 – Quentin

あなたが知っているなら、あなたの問題を解決するはずのhtmlタグを1つしか持たず、特定の高さに保つ必要があります –

-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されていません...あなたのソリューションは、私のために働く、ありがとう！ –

"<！DOCTYPE html>行はそれとは関係がありません"と言うのはストレッチです。配置しないと、ボディモードはボディがビューポートの高さの100％になるので、高さを設定します：html要素とbody要素の100％は不要です。 [quarks mode standard、3.6と3.7を参照]（https://quirks.spec.whatwg.org/#the-html-element-fills-the-viewport-quirk） – Alohci

予期せぬレイアウトのDOCTYPE

答えて

関連する問題