使用 CSS 的菜单表占据网页的整个高度答案

【问题标题】：Menu table takes up full height of webpage with CSS使用 CSS 的菜单表占据网页的整个高度
【发布时间】：2013-03-28 18:15:29
【问题描述】：

我有这个包含链接的表。按下时，它会在同一页面上显示结果。我的问题是结果在菜单下方。我想用 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%;，但除了给表格高度100% 或px 之外什么也没做。有没有人可以解决这个问题？

【问题讨论】：

我会避免使用表格。表格应该用于表格数据。您将很难让布局与表格一起使用。
它只是一个很好的侧边菜单。我想知道我怎样才能使它检索到的数据不会出现在菜单下方
你为什么不试试引导导航？ twitter.github.com/bootstrap/components.html#navs
您能否提供一个指向我们可以看到您所描述的行为的页面的链接？或者在jsfiddle.net上提供一个页面？
图像中断了，但它可以很好地了解帖子 jsfiddle.net/XhcdB 会发生什么

标签： php html css html-table

【解决方案1】：

我相信这就是你要找的。p>

http://jsfiddle.net/XhcdB/

div#recipes{
    float: left; 
}

div#pageMiddle{
    display: inline-block;
}

【讨论】：

感谢 inline-block 完成了这项工作。感谢帮助

【解决方案2】：

好的，您可以采取多种方法。以下是它们的优先顺序：

将所有主要内容放在一个 div 中并使其浮动。然后你的 nav 将向左浮动，内容向右浮动。这是进行布局的现代最佳实践方式。
使用 iframe - 如果您可以使用 iframe，请将您的内容在右侧的 iframe 中。您的导航不会在每次点击时重新加载，并且 iframe 中的内容可能会滚动，等等。不是理想的解决方案，但可以工作。
使用表格 - 您可以创建一个占据整个表格的大表格页面左侧 td 中包含导航，右侧 td 中包含内容。这个显然是一种较旧且不受欢迎的方法，但它会工作。

【讨论】：