如何在页面底部定位面板答案

【问题标题】：how to position panel at bottom of page如何在页面底部定位面板
【发布时间】：2014-11-21 23:03:52
【问题描述】：

我有一个 div，其中包含 3 个面板，所有面板的宽度都是 div 的 100%（div 是页面的 100% 宽度）。一个在顶部，一个在中间，一个在底部。

无论中间是否为空，我都希望底部的面板保留在那里。我如何在 c#、asp.net 或 html 中做到这一点？

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="Form1" runat="server">
        <div>
            <asp:HiddenField ID="hidLastValidateImgBtnEventId" runat="server" />
            <asp:HiddenField ID="hidLastExpandImgBtnEventId" runat="server" />   
        </div>
        <div id="divMaster" align="center" style="height: 100%">
            <asp:Panel ID="PnlNav" runat="server" Width="75%" Height="25%">
                <asp:Image ID="imgNav1" runat="server" 
                    ImageUrl="~/img/nav/nav_preserve_target_active_logo.png" Width="24%" 
                    Margin-left="-10px" BorderStyle="None"/>
                <asp:Image ID="imgNav2" runat="server" 
                    ImageUrl="~/img/nav/nav_preserve_analyse_inactive_logo.png" Width="24%" 
                    Margin-left="-10px"/>
                <asp:Image ID="imgNav3" runat="server" 
                    ImageUrl="~/img/nav/nav_preserve_metadata_inactive_logo.png" Width="24%" 
                    Margin-left="-10px"/>
                <asp:Image ID="imgNav4" runat="server" 
                    ImageUrl="~/img/nav/nav_preserve_preserve_inactive_logo.png" Width="24%" 
                    Margin-left="-10px" BorderStyle="None" />
            </asp:Panel>
            <asp:Panel ID="PnlButtons" runat="server" Width="75%" Height="25%">
            </asp:Panel>
            <asp:Panel ID="PnlFooter" runat="server" Width="75%" Height="25%">
            <asp:Image ID="imgFooter1" runat="server" ImageUrl="~/img/footer/fp7_logo.png" 
                Width="32%" />
            <asp:Image ID="imgFooter2" runat="server" 
                ImageUrl="~/img/footer/app_logo.png" Width="32%" />
            <asp:Image ID="imgFooter3" runat="server" 
                ImageUrl="~/img/footer/developedby_logo.PNG" Width="32%" />
        </asp:Panel>           
        </div>
    </form>
</body>
</html>

【问题讨论】：

标签： c# html css asp.net

【解决方案1】：

您只能使用 css 来做到这一点

供您参考检查

http://css-tricks.com/snippets/css/sticky-footer/

Sticky footer doesn't have 100% width

【讨论】：

我不打算在 pxls 中设置高度，但这必须做，虽然我不敢相信这是不可能的，如此简单且看似常见的要求！
有人知道 % height = 25% 怎么做

【解决方案2】：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Fearghal</title>
    <link href="Fearghal.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="Form1" runat="server">
    <div>
        <asp:HiddenField ID="hidLastValidateImgBtnEventId" runat="server" />
        <asp:HiddenField ID="hidLastExpandImgBtnEventId" runat="server" />
    </div>
    <div id="divMaster" align="center" style="height: 100%">
        <asp:Panel ID="PnlNav" runat="server" Width="75%" Height="25%">
            <asp:Image ID="imgNav1" runat="server" ImageUrl="~/img/nav/nav_preserve_target_active_logo.png"
                Width="24%" Margin-left="-10px" BorderStyle="None" />
            <asp:Image ID="imgNav2" runat="server" ImageUrl="~/img/nav/nav_preserve_analyse_inactive_logo.png"
                Width="24%" Margin-left="-10px" />
            <asp:Image ID="imgNav3" runat="server" ImageUrl="~/img/nav/nav_preserve_metadata_inactive_logo.png"
                Width="24%" Margin-left="-10px" />
            <asp:Image ID="imgNav4" runat="server" ImageUrl="~/img/nav/nav_preserve_preserve_inactive_logo.png"
                Width="24%" Margin-left="-10px" BorderStyle="None" />
        </asp:Panel>
        <asp:Panel ID="PnlButtons" runat="server" Width="75%" Height="25%">
        </asp:Panel>
        <div class="customFooter">
            <asp:Panel ID="PnlFooter" runat="server" Width="75%" Height="25%">
                <asp:Image ID="imgFooter1" runat="server" ImageUrl="~/img/footer/fp7_logo.png" Width="32%" />
                <asp:Image ID="imgFooter2" runat="server" ImageUrl="~/img/footer/app_logo.png" Width="32%" />
                <asp:Image ID="imgFooter3" runat="server" ImageUrl="~/img/footer/developedby_logo.PNG"
                    Width="32%" />
            </asp:Panel>
        </div>
    </div>
    </form>
</body>
</html>

这里是 CSS：

.customFooter
{
    width: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #CCCCCC;
}

对我有用，希望对你有帮助

【讨论】：

谢谢，我找到了解决方法，我的 body 标签中缺少高度样式，这将整个 body 设置为 100%，然后一切都到位了。

【解决方案3】：

我的身体标签缺少高度样式，呵呵！这意味着并非所有子控件都达到了 100%，而只是获取了他们需要的内容。

    <div id="divMaster" align="center" style="height:100%">

【讨论】：