Question

我有这个包含链接的表。按下时，它会在同一页面上显示结果。我的问题是结果在菜单下面。我想使用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;
}

我尝试给td id height: 100%;并{{1}}，但没有做任何事情，只是给表高度100％或px。有人有解决方案吗？

Answer 1

好的，你可以采取几种方法。在这里，他们按优先顺序排列：

将所有主要内容放入div并将其向右浮动。然后你的 nav将向左浮动，内容向右浮动。这是进行布局的现代最佳实践方式。
使用iframe - 如果您对拥有iframe感到满意，请填写您的内容在右侧的iframe中。每次点击都不会重新加载导航，iframe中的内容可能会滚动，等等。不是理想的解决方案，但可以发挥作用。
使用表格 - 您可以创建一个占据整体的大表格左侧td中导航的页面和右侧td中的内容。这个显然是一种较老的，不是首选的方式，但它会工作

Answer 2

我相信这就是你要找的东西。

http://jsfiddle.net/XhcdB/

div#recipes{
    float: left; 
}

div#pageMiddle{
    display: inline-block;
}

菜单表用CSS占据网页的全高

2 个答案: