Chrome -webkit-box-flexはHTML5では展開されません

ヘッダー、コンテンツ、フッターで簡単なウェブサイト構造を設定します。ヘッダーとフッターは、余分な空白を埋めるように内容が拡張されたサイズが設定されています。サイトでは、最小サイズ800x600を適用する必要があります。これはDOCTYPEを指定しなくても正常に動作しますが、コンテンツセクションを追加すると展開されません。Chrome -webkit-box-flexはHTML5では展開されません

ここに私のコードです。 DOCTYPEを削除して、適切に機能することを確認します。このコードはChromeでのみ動作します。

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
</head> 
<body style="min-width: 800px; min-height: 600px;margin: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-flex: 1.0; background-color: gray;"> 
    <div style="height: 50px; background-color: red;">Header</div> 

    <div style="background-color: yellow; -webkit-box-flex: 1.0;">Content</div> 

    <div style="height: 50px; background-color: blue;">Footer</div> 
</body> 
</html>

出典

2012-01-17 Spidy

申し訳ありませんが、私は何の助けもなく、-webkit-box-flex（聞こえることはありません）という言葉も聞こえませんでしたが、同じ種類のレイアウトを得るための別の方法がここに記述されています... http：//blog.stevensanderson。 com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easy/ – PAEz

私はそのレイアウトを行う方法を知っていますが、私が目指しているものではありません。フッターを常に表示したくありません。十分なコンテンツがない場合でも、私はいつも一番下にそれを望んでいます。 – Spidy

htmlとbodyあなたがする必要があるので、あなたはそれを指定しない限り、完全なビューポートを占有しませんが...

html, body { 
    height: 100%; 
}

これはあなたの問題を解決します。しかし、なぜdoctypeを削除するのが同じ効果をもたらすのか分かりません。

出典

2012-02-03 06:59:21 Duopixel

ありがとう！私は100％の高さで身体を試しましたが、htmlでは試しませんでした。それはそれを修正した。 – Spidy

Chrome -webkit-box-flexはHTML5では展開されません

答えて

関連する問題