Question

我有一个包含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>

Answer 1

您只能使用css

执行此操作

供参考检查

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

Sticky footer doesn't have 100% width

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

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

Answer 3

我的身体标签缺少高度风格，doh！这意味着所有儿童控制都不能弥补100％但只是拿走了他们需要的东西。

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

如何在页面底部定位面板

3 个答案: