HTML CSS body autosizing

このタイプのものにはたくさんの質問がありますが、私の質問に答えるものは見つかりませんでした。

私は、特定の基準に基づいて投稿をフィルタリングできる「ニュースフィード」形式のサイトを持っています。したがって、フィルタによっては、ブラウザのウィンドウよりもはるかに背の高いコンテンツを取得できます。他のフィルタでは、コンテンツを取得できません。HTML CSS body autosizing

WebkitのWebインスペクタを使用すると、html {min-height:100%}は<html>タグのトリックを行います。 <body>はまったく同じことをしたい：コンテンツがページに収まるときは100％にし、それ以外の場合は展開する。高さは<html>用に設定されていない場合

しかし、私は体に割合heightまたはmin-heightを使用することはできません。そのパーセンテージを基にして高さを継承しません。だから、ドキュメントの内容が完全なウィンドウよりも小さくなったときに私が終わるのは、すべてのものが右から足を引っ張って、コンテンツの足元が私の背景やものをねじにしてしまうからです。

アイデア？

html,body{ height: 100%; }

そして、私はあなたの背景は、bodyタグの上にあることを推測しています：あなたが必要とするすべての追加することであるように聞こえる限られた詳細から

出典

2012-03-19 Andrew

を発行し、の高さを設定することはできません。 –

これは、コンテンツがブラウザウィンドウよりも大きい場合、すべてのコンテンツの最後まで拡張されないようにするためです。 – Andrew

これが起こった場合、オーバフローを自動に設定します –

はたぶん、あなたはこのような何かを試すことができます：私は願っています

html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
#content { 
    min-height: 100%; 
}

これは解決するのに役立ちますが

出典

2012-03-19 15:17:11 davorivas

です。

出典

2012-03-19 14:33:52 corymathews

いいえ、ブラウザウィンドウの高さに高さを維持します。これは、コンテンツがウィンドウの1ページを超えている場合には問題ありません。本文には灰色の背景があり、すべてのコンテンツが配置される中央の白いdivがあります。問題は、divは体の大きさにしかならないということです。 – Andrew

私の提案は、身体の高さを100％に設定することです。 100％は、親要素として同じくらい多くのスペースを取るべきであることを意味します。だから、あなたのhtmlタグは、ちょうどbodyタグのサイズが同じ任せることになっているものない場合：

<html style="min-height: 100%"> 
<body style="height: 100%"> 
</body> 
</html>

出典

2012-03-19 14:36:38 devsnd

body要素は、htmlの高さが指定されていない限り、パーセンテージを無視するように見えます。 – Andrew

答えて

関連する問題