1

はじめに: html と css で簡単に設計されたページがあります。ほとんどの場合、div ボックスを成形するための css を使用した div のみです。

wordpress ブログ サイトのブログ投稿のみをこのページに統合したいと考えています。「インポートされた」投稿を含む 1 つの (大きな) div を除いて、デザインのすべてが同じである必要があります。wp サイトへのウィンドウであるかのように、この div に独自のスクロールバーを含めたくありません。wp ブログ記事の高さに応じて、サイト全体を垂直方向に拡張したいと考えています。

ここで提供されている方法を使用しました: http://moshublog.com/2005/07/05/integrate/2/ ブログを組み込むために、これはうまくいきました。

問題: これを含むブログ投稿 (「ループ」) を含む div が垂直方向に展開されません。あたかも検出されなかったかのように、ブログ投稿を単に切り取ります。高さは、それを含む div とその div の親で 100% に設定されます。

質問: wp ブログ投稿を含む div を、それらのブログ投稿の高さに基づいて垂直方向に拡張するにはどうすればよいですか?

私が試したこと: - - - Overflow:hidden; ページにフローティング要素があります。見つけた他の質問で提案された、overflow:hidden; であらゆる可能性を試しました。これは何も変わりませんでした。- - - bodyとhtmlをheight=100%にしています。これは何も変わりませんでした。- - - それを含む div と親 div のいずれかの高さを固定の高さに変更します。これで高さが変わりました。大きければ、より多くのブログ投稿が表示されます。ポストはそこにありますが、切り取っただけです。

コードは次のとおりです。

<!-- Main Body Start -->
<div class="clean" style="width:1200px; height:100%; border:0px; margin:0 auto;">

<!-- Body Column One Start -->
<div class="clean" style="width:950px; height:100%; float:left;">
    <!-- Blog Integration Start -->
    <div class="clean" style="width:946px; height:100%; max-width:946px; border-style:none solid; border-color:#99AAFF; 
    border-width:0px 2px; float:left; overflow:hidden; background-color:#ffff77;">

        <div class="clean" style="width:926px; height:100%; margin:0px 10px;">
    <!-- WP Blog code goes in here -->
            <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
            <div class="post" id="post-<?php the_ID(); ?>">     
            <h2>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php    
            the_title_attribute(); ?>">
            <?php the_title(); ?>
            </a>
            </h2>   
            <small>Posted in <?php the_category(', ') ?> on <?php the_time('F jS, Y') ?>  by <?php the_author() ?> &ndash; 
            <?php comments_popup_link('Be the first to comment', '1 Comment', '% Comments'); ?> 
            <?php edit_post_link('Edit', ' | ', ''); ?> </small>
            <div class="entry">
            <?php the_content('<span class="more">read more &raquo;</span>') ?>
            </div>
            <?php if(is_single()) {?><p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?></p><?php } ?>
            </div>
            <?php endwhile; ?>
            <div class="navigation">
            <div class="alignleft">
            <?php next_posts_link('&laquo; Older Entries') ?>
            </div>
            <div class="alignright">
            <?php previous_posts_link('Newer Entries &raquo;') ?></div>
            </div>
            <?php else : ?>                 
            <?php include (TEMPLATEPATH . "/searchform.php"); ?>
            <?php endif; ?>
        </div>

    </div>

「wp ブログ コードはここに入る」から「?php endif; ?」までのすべて wpブログサイトからのもので、「ループ」です。

ありがとうございました。

4

1 に答える 1

0

div の高さを設定しないでください。設定した高さに制限されますが、高さを 100% に設定すると、div はコンテナーの領域の 100% ではなく 100% を埋めます。そのコンテンツの % であるため、最も外側の div の場合、これはウィンドウの 100% になります。

于 2013-04-15T23:07:29.240 に答える