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和 haveheight: 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 回答