0

ヘッダー、コンテンツ div、フッターの 3 つの子を持つ <article> 要素があります。記事は高さと幅が設定された絶対位置に配置されるため、記事のグリッドにうまく収まります。ヘッダーには、記事のタイトル、日付などの可変コンテンツが含まれており、必要に応じて展開できます。フッターは、記事の下部をパディングすることによって、記事内に確保されたスペース内に絶対に配置されます。ただし、コンテンツ div は適切に再生されません。

何が起こっているかというと、grid_content div は、そのコンテンツを収容するために必要なだけのスペースを占有し、<article> 要素をオーバーフローさせます。それに設定する明示的な高さを考え出しますが、 <article> の高さとヘッダーの高さはどちらも可変で、それぞれグリッド内で占めるスペースの数と記事のタイトルに応じて異なります。

divにその封じ込めを尊重させるためのきれいな方法はありますか?それとも、divをそのままにしておくために醜いJSハックを行う必要がありますか?

ありがとう！

http://jsfiddle.net/j2fE4/

4

1 に答える 1

0

さて、私はなんとかこれを解決することができましたが、解決策はJavaScriptを含む2つの部分からなる取引でした。

まず、カスタムJavaScriptを使用して、参照用にここに貼り付けた.grid_content要素の適切な高さを計算しました。解決策は他のプロジェクトでは一般的ではありませんが、思考プロセスを説明する必要があります。

function resizeContentElements() {
    $('div.grid_content').each(function(i, element){
        var $element = $(element);

        var parentHeight = $element.parent().height();
        var elementPadding = parseFloat($element.css('padding-top')) + parseFloat($element.css('padding-bottom'));
        var siblingSpace = $element.prev().height() + parseFloat($element.prev().css('padding-top')) + parseFloat($element.prev().css('padding-bottom'));

        $element.height(parentHeight - siblingSpace - elementPadding);
    });
}

その後、http： //dotdotdot.frebsite.nl/を取得して、div.grid_elementコレクションに適用しました。コンテンツが省略記号で切り取られるポイントはまだそうではないようですが、すべてがうまく楕円形になっています。私の最も良い推測は、それらのコンテナの不規則な（そしてしばしば無効な）マークアップがそれを台無しにしているということです。

于 2012-07-18T20:43:06.763 に答える