0

コンテナ（div）を使用したレイアウトで作業しています。コンテナ内には、ヘッダー用のdivとコンテンツ用のdivの2つの要素があります。ヘッダーのdivの高さは固定されており、コンテンツのdivは使用可能なスペースを埋める必要があります。コンテナdivには独自のスタイルがあり、オーバーラップすることはできません。私の目標は、単純なdivベースの要素を作成して、単純なウィジェットをWebページに配置することです。

私は次のような他の同様の質問をチェックしました：

しかし、この解決策はどれも私には当てはまりません。

私はなんとかこのhtml/cssを手に入れました：

<?xml version="1.0"?>
<html>
    <head>
        <style type="text/css">
            .workbench {
                width: 100%;
                height: 100%;
                background: white;
            }
            .widget {
                width: 100px;
                height: 500px;
                position: absolute;
                top: 50px;
                left: 50px;
                border: solid 1px black;
                margin: 2px;
            }
            .widget-header {
                height: 50px;
                border: solid 1px red;
                margin: 2px;
            }
            .widget-body {
                position: absolute;
                top: 50px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                border: solid 1px blue;
                overflow: hidden;
                margin: 2px;
            }
        </style>
    </head>
    <body>
        <div id="workbench" class="workbench">
            <div id="widget" class="widget">
                <div id="widget-header" class="widget-header">
                    Header
                </div>
                <div id="widget-body" class="widget-body">
                    Body
                </div>
            </div>
        </div>
    </body>
</html>

これはFireFoxとChromeの魅力のように機能しますが、InternetExplorer8では機能しません。

ページ結果

手伝って頂けますか？

4

3 に答える 3

1

IE5.5 / IE6市場を目指していないことに気づき、説明によれば（ファイルからではなく、jsFiddleで正常にレンダリングされます）、問題はDoctype宣言がないことに起因しているようです。

ドキュメントを正しくレンダリングするには、ブラウザがquirksmodeに陥ることを拒否するために、doctypeを指定する必要があります。ドキュメントは有効なXHTML規則に準拠しているように見えるため、XHTMLトランジショナルDoctypeを使用してIE8に標準モードでレンダリングするように指示するか、HTML5 doctypeを使用できます（HTML5のセマンティクスを使用する場合はHTML5 shim / shivとともに）同じように）。

便宜上、XHTML遷移Doctype宣言は次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

注：Modernizrには独自のHTML5 shivが含まれているため、開発を容易にするために使用することをお勧めします。

これがあなたがいじくり回すためのjsFiddleです

于 2012-05-29T07:26:40.087 に答える
-1

ウィジェットの高さは 500px で、ウィジェット ヘッダーは 50px です。widget-body を 450px にしないのはなぜですか。（追加のマージンとパディングも差し引いて）、ウィジェットヘッダーとウィジェット本体を相対的な位置にします。

于 2012-05-28T16:11:00.550 に答える
-2

jquery はこれに役立ちます。

$('.workbench').each(function(){
  var total=$(this).height();
  var headerHeight=$(this).find('.widget-header').height();
  $(this).find('.widget-body').height(total-headerHeight);
});
于 2012-05-28T16:10:26.477 に答える