0

これはかなり単純な問題だと思いますが、頭を包み込むことができず、jQueryはあまり得意ではありません。の中にdivがあります。記事の高さはコンテンツによって異なります（ブログ投稿なので、短いものもあれば長いものもあります）。divをネストされている記事の高さに一致させたい。

HTML：

    <article class="PostHome">
    <div class="ColorBarLeft"></div>
        <header>
            <h3>@Html.DisplayFor(modelItem => item.Title)</h3>
            <small>@Html.DisplayFor(modelItem => item.DateCreated)</small>
        </header>

        <section id="PostContent">
            @Html.DisplayFor(modelItem => item.Content)
        </section>

        <section id ="PostTags">
            @Html.Label("Tags:")
            @Html.DisplayFor(modelItem => item.Tags)
        </section>

        @Html.ActionLink("View Full Post", "Post", new { blogTitle = item.Title.Replace(" ", "-"), id = item.Id}, null)
    </article>

そして、私はそのようないくつかのjQueryを試しました：

$(document).ready(function () {
$(".ColorBarLeft").height(function () {
    var height = $(this).height()
    $('.PostHome').height(height);
})
});

コードは正しいと思いますが、jQueryがあまり得意ではない可能性があります。

これが重要かどうかはわかりませんが、ページには一度に複数のポストホームとColorBarleftsが表示されます。

***編集、id=PostHomeをclass=PostHomeに変更

ここに画像の説明を入力してください

赤い波線のボックスがあるバーが欲しいです。

4

2 に答える 2

0

これを試して：

 $(document).ready(function () {
   $('.ColorBarLeft').height( $(".PostHome").innerHeight() + 'px' );
 });

複数の.PostHomeオブジェクトがあり、最初のオブジェクトのみをターゲットにする場合は、次のようにします。

 $(document).ready(function () {
   $('.ColorBarLeft').height( $(".PostHome:eq(0)").innerHeight() + 'px' );
 });

innerHeight()このメソッドは、上下のパディングを含む要素の高さをピクセル単位で返しますが、パディングでは高さを返さないため、Heightの代わりに使用Height()しています。

http://api.jquery.com/innerHeight/

または、CSSを使用してこれを行うこともできます。スタイルシートでは、次のようにします。

.ColorBarLeft { height:100%; }

ただし、これは、Matt Coughlinが述べているように、含まれているオブジェクトにピクセルやemなどの明示的な高さが設定されている場合にのみ機能します。

于 2012-07-02T00:41:06.663 に答える
0

別の方法は、divを追加するのではなく、カラーバーをbg画像として記事に追加することです。また、必要に応じて、記事の左側のパディングをカラーバーの幅と同じにします。

もう1つのオプションは、divを記事内のすべてのコンテンツのラッパーとして機能させ、カラーバー（bg画像とオプションの左パディング）をdivに追加することです。

どちらの場合も、bgイメージは、jQueryの支援なしで、正しい高さを持つことが自然に保証されている要素に適用されます。これは、ページが開いているときにコンテンツの高さが変更される可能性がある場合に特に役立ちます。これは、jQueryを使用して高さを更新する必要がないためです。

編集：

CSSのみの解決策（jQuery / JavaScriptを必要としない）は、記事が上下のコンテンツとは別のコンテナーにあり、3つのコンテナーすべてがページの水平方向に別々に中央に配置されている場合だけだと思います。その場合、記事のコンテナの左側にbg画像を配置し、記事の幅を固定して水平方向に中央に配置することができます。これにより、jQueryが不要になり、絶対的な配置（レイアウトのフローからコンテンツが削除される）が不要になり、ページが開いているときにコンテンツが変更された場合に高さを更新する必要がなくなります。

それ以外の場合は、正方形に戻り、適切なjQueryコードを見つけて、カラーバーdivの適切な高さを設定します。記事の内容が動的に変化する場合は、必ず高さを再適用してください。

$('.ColorBarLeft').height($('.PostHome').height());
于 2012-07-02T00:42:24.290 に答える