如何在页面底部放置面板

本文关键字：底部 | 更新日期: 2023-09-27 18:31:28

我有一个包含 3 个面板的div，所有面板的宽度均为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>

如何在页面底部放置面板

您只能使用 css 执行此操作

供您参考，请查看此内容

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

粘性页脚没有 100% 的宽度

<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;
}

它对我有用，希望对您有所帮助

我的身体标签缺少身高样式，嘟！这意味着所有儿童对照组并不构成100%，而只是服用了他们需要的东西。

    <div id="divMaster" align="center" style="height:100%">
相关文章：