0

リンクを含むこのテーブルがあります。押すと、同じページに結果が表示されます。私の問題は、結果がメニューの下に表示されることです。CSS を使用して、テーブルの高さがページ全体を占めるようにしたいと考えています。

これはテーブルです：

<div id="categories">
    <table>
        <tr>
            <th>Categories</th>
        </tr>
        <tr>
            <td >
                <ul>
                    <li><a href="categories.php?c=apts">Appetizers</a></br></li>
                    <li><a href="categories.php?c=brds">Breads</a></br></li>
                    <li><a href="categories.php?c=brek">Breakfast</a></br></li>
                    <li><a href="categories.php?c=cond">Condiments</a></br></li>
                    <li><a href="categories.php?c=dsrt">Desserts</a></br></li>
                    <li><a href="categories.php?c=drnk">Drinks</a></br></li>
                    <li><a href="categories.php?c=hmed">Homemade Ingredients</a></br></li>
                    <li><a href="categories.php?c=lnch">Lunch & Snacks</a></br></li>
                    <li><a href="categories.php?c=main">Main Dishes</a></br></li>
                    <li><a href="categories.php?c=psre">Pasta & Rice</a></br></li>
                    <li><a href="categories.php?c=slds">Salads</a></br></li>
                    <li><a href="categories.php?c=sauc">Sauces & Salsas</a></br></li>
                    <li><a href="categories.php?c=side">Side Dishes</a></br></li>
                    <li><a href="categories.php?c=stup">Soups & Stews</a></br></li>
                    <li><a href="categories.php?c=spcl">Special Diet</a></br></li>
                    <li><a href="categories.php?c=vegi">Vegitarian</a></br></li>
                    <li><a href="categories.php?c=diet">Weight Watchers</a></br></li>
                </ul>
            </td>
        </tr>
    </table>
</div>

現時点で、私のCSSには次のものがあります:

div#categories{
    float: left;
}

tdanidを指定してみましheight: 100%;たが、テーブルの高さを 100% または px にするだけでなく、何もしませんでした。誰にもこれに対する解決策がありますか？

4

2 に答える 2

0

わかりましたので、あなたが取ることができるいくつかのアプローチがあります。ここでは、それらを優先順に示します。

  1. すべてのメイン コンテンツを div に入れて、正しくフロートします。次に、ナビゲーションが左に、コンテンツが右にフロートします。これは、レイアウトを行う最新のベスト プラクティスの方法です。
  2. iframe を使用する - iframe を使用しても問題ない場合は、コンテンツを右側の iframe に配置します。クリックするたびにナビゲーションがリロードされず、iframe 内のコンテンツがスクロールするなどの可能性があります。理想的なソリューションではありませんが、機能する可能性があります。
  3. テーブルを使用する - 左の TD にナビゲーション、右の TD にコンテンツを配置して、ページ全体を占める大きなテーブルを作成できます。これは明らかに古い方法であり、推奨されていませんが、うまくいくでしょう。
于 2013-03-28T20:12:37.867 に答える
0

私はこれがあなたが探しているものだと信じています。

http://jsfiddle.net/XhcDB/

div#recipes{
    float: left; 
}

div#pageMiddle{
    display: inline-block;
}
于 2013-03-28T20:32:49.773 に答える