1

次のhtmlを想定します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="header">
            <!-- dynamic height -->
        </div>
        <div id="main" style="overflow: scroll;">
            <!--
                contains actual content
                height should be whatever is left over
            -->
        </div>
        <div id="footer">
            <!-- dynamic height -->
        </div>
    </body>
</html>

基本的に私が欲しいのは：

main height = body height - (header height + footer height)

本文とHTMLの高さは100％です。

との両方の高さheaderはfooter動的であるため（非常に頻繁に変更されます）、の高さを動的に設定する方法が必要ですmain。つまり、高さをピクセルまたはパーセンテージで指定することはできません。

確かに他の同様の質問がありますが、私は「フローティング/スティッキーフッター」を探していませんmain。divは残りの高さを持っている必要があります。

4

3 に答える 3

1

フッターとヘッダーの高さを指定する必要があります。

ドキュメントでjavascriptを使用して、フッター、ヘッダー、メインdivの高さを設定できます。

次に、次のようにcssを使用します。

#header{
  position: absolute;
  top: px;
  height: /*dynamically set by javascript*/;
  left: px;
  right: px;
}

#footer {
  position: absolute;
  bottom: 0px;
  height: /*dynamically set by javascript*/;
  left: 0px;
  right: 0px;
}

#main {
  position: absolute;
  bottom: /* set by javascript with height of footer */;
  top: /* set by javascript with height of header */;
  left: 0px;
  right: 0px;
}
于 2013-01-31T12:48:21.743 に答える
1

cssを使用してこれを行うことはできません。javascriptまたはjqueryを使用する必要があります

コンテンツコンテナに最小の高さを設定する

于 2013-01-31T12:54:54.737 に答える
0

#main要素を特定の高さに制限することになるでしょう。これは、これを使用する場所について私が考えることができる唯一の条件だからです。body要素はヘッダー、メイン、およびbodyの高さに応じて自動的にスケーリングされることをすでに知っているはずです。したがって、パディング/マージンを使用しない限り、質問で述べた式は常に真になります。この場合、max-heightを使用します。

#main {
    max-height: 100%;
}

これにより、＃main要素が100％の高さ、つまりページ全体に制限されます。

これはあなたが探しているものではないと思うので、なぜそうしたいのかについてもう少し明確にしたいと思いますか？代替ソリューションを提案できる可能性があります。

于 2013-01-31T12:43:19.637 に答える