身長100％が計算されていません

私はdivを持っていますページの下部まで伸ばしたいと思います。これに対する標準的なアプローチは、あなたが望むdiv、body、およびhtmlに対してmin-heightを100%に設定することです。私はこれをやったが、ブラウザー（firefoxとmobile safariの両方でテスト済み）は気にしないようだ。簡略化されたコード：身長100％が計算されていません

<html> 
    <head> 
     <style> 
     html{ 
       min-height: 100%; 
       position: relative; 
     } 
     body { 
      min-height: 100%; 
      position: relative; 
     } 
     #main { 
      min-height: 100%; 
      overflow:hidden; 
     } 
     </style> 
    </head> 
    <body> 
     <div id='main'> 
      <p>content</p> 
     </div> 
    </body> 
</html>

放火犯との緊密な検査は、それが読み取られるCSSを読み出し、（1080モニタに）、それはHTMLと本体要素に986pxの高さを計算することを言うだけのために517pxことがわかりますdiv。しかし、実際には奇妙なのは、レイアウトタブは本体要素の高さが517pxであることを示しているようですが、それは986pxであるはずです。

ブラウザは高さを知っていますが、実際には設定しません。何が実際...

EDIT：私は同様の質問に出くわしました。提案で回答した人は、パーセントの代わりにvhを使用しています。これはbodyタグとhtmlタグで機能しましたが、divで使用すると、実際にはdivの上にヘッダがあるため、ページより長くなります。だから私はパーセンテージを使用しますが、それは最初にbodyと同じ問題が発生します。これは読み込み、計算、実行されませんでした。

出典

2016-09-01 inecrafter

私が現在使っているアドホックな手法は 'html {height：100％; } body {margin：0;}分 - 高さ：100％;ディスプレイ：フレックス;フレックスフロー：カラムnowrap; } #main {フレックス：1; } 'では、#mainはすべての最新のブラウザIIRCで完全に拡張する必要があります。 – Tony

すべては、ブラウザの癖に頼らず、flexの標準的な動作です。 html/body要素の高さの設定は、私にはもっと壊れやすく、ブラウザの実装にもかかわらずです。 – Tony

このコードを試してみてください。役立つかもしれません。

<div id=fullheight> 
Lorem Ipsum 
</div> 

* { padding: 0; margin: 0; } 
html, body, #fullheight { 
min-height: 100% !important; 
height: 100%; 
} 

#fullheight { 
width: 250px; 
background: blue; 
}

出典

2016-09-01 17:39:04

最初のコメントのコードがトリックでした。どういうわけか分かりませんが、今はうまくいきます。今後の参考のためにここにコードを残す：

html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    min-height: 100%; 
    display: flex; 
    flex-flow: 
    column nowrap; 
} 
#main { 
    flex: 1; 
}

ありがとう、Anton Strogonoff！

出典

2016-09-02 16:05:47 inecrafter

主にあなたの 'html'が100％に設定されているために動作します – Lee

助けてくれてうれしい！ – Tony

身長100％が計算されていません

答えて

関連する問題