ASP.NET 两列固定布局，如何填充右列答案

【问题标题】：ASP.NET Two column fixed layout, how to fill right columnASP.NET 两列固定布局，如何填充右列
【发布时间】：2017-02-14 02:46:42
【问题描述】：

是的，关于固定布局的另一个问题... 我做了很多研究并应用了许多解决方案，但我从未找到合适的解决方案。问题很简单：我想要一个填充浏览器客户区域的 Web 应用程序。页眉、内容区域和页脚很好地固定在页面上，不可移动。显然，内容区域右侧有一个菜单，左侧有一个可变内容......菜单有一个固定的宽度，我希望剩下的部分填充浏览器。这是我的母版页 (ASP.NET)：

<body>
    <div id="header" class="header">
        <table class="titleBar" style="border-spacing: 0px;">
            <tbody>
                <tr>
                    <td style="text-align: left; vertical-align: middle; width: 45px; padding-left: 10px">
                        <a class="Logo" align="middle" href="http://www" target="_blank">
                            <img src="../../Images/55.jpg" style="border-bottom-width: 0px;" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
        <div class="navigationMenu">
            <h3><a href="../List/A">A</a></h3>
            <h3><a href="../List/B">B</a></h3>
        </div>
        <div class="itemsList">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
    <div class="footer">
        <div>
            <p>&copy; 2016  - <a href="http://">www</a></p>
        </div>
    </div>
</body>

这是CSS

html
{
    height: 100%;
}

body
{
    padding: 0px;
    margin: 0px;
    background: #ffffff;
    font-size: .80em;
    font-family: Roboto, Verdana;
    position: absolute;
    color: #696969;
}

.header
{
    padding: 4px 4px 4px 4px;
    margin: 0px auto;
    position: fixed;
    top: 0;
    width: 100%;
    height: 64px;
}

.container
{
    padding: 4px;
    margin: 0px auto;
    width: 100%;
    position: fixed;
    left: 0;
    top: 65px;
    bottom: 33px;
    overflow: auto;
}

.navigationMenu
{
    position: fixed;
    margin: 0px 2px; 
    padding-left: 4px;
    width: 16em; 
    background-color: #CCF;
    top: 65px;
    bottom: 33px;
}

.itemsList
{
    background-color: #FFA;
    position: fixed;
    top: 65px;
    left: 16em;
    margin-left: 8px;
    bottom: 33px;
    overflow: auto;
}

.footer
{
    width: 100%;
    margin: 0px auto;
    position: fixed;
    bottom: 0;
    text-align: center;
    height: 32px;
}

一切正常，但没有填满浏览器的 itemsList div。你能帮助我吗？有什么建议吗？

谢谢！

【问题讨论】：

您在页面上没有任何具有“容器”类的内容，因此您的 CSS（包含宽度：100%）没有任何效果。我想也许你需要一个额外的 <div class="container"> 来包装 navigationMenu 和 itemsList，这应该会有所帮助。如果您想可视化它是否“填充”了窗口，您可能需要为其添加背景颜色。
谢谢。我包装了 div 容器，但 itemsList 没有填充到浏览器客户端区域的右侧。
好吧对不起，我以为你只是想让整个容器是 100% 宽度，而不是那个特定的 div。默认情况下，div 仅扩展为其中任何内容的大小。所以我建议也给 itemsList 一个宽度。它应该与navigationMenu并排，还是在其上方的navigationMenu？
是的，它与导航菜单并排。所以需要一个js来计算和设置itemsList的宽度？
不，只需在 CSS 中给每一个宽度的百分比。然后它们将彼此成比例

标签： html asp.net css master-pages

【解决方案1】：

使用表格和表格列设置页面布局是非常糟糕的做法。这违反了semantic markup的原则；表格用于表达表格数据，而不是用于创建布局。它还会导致screenreaders 出现问题并违反提供accessibility for those with disabilities 的准则。

相反，您应该使用 DIV 元素创建布局，例如 like this developer。

【讨论】：

所有这些都是完全正确且很好的一般建议，但 OP 没有使用表，除了标题内部，这实际上并没有为手头的具体问题提供答案跨度>