带有Bootstrap和固定页脚的ASP .NET母版页,页面内容与页脚冲突

时间:2018-04-10 04:44:49

标签: css asp.net twitter-bootstrap footer

以下是我的ASP .NET母版页。 Bootstrap.min.cs出现在我的主题中,主题在我的webconfig文件中定义。

<%@ Master Language="C#" CodeFile="HomePage.master.cs" Inherits="HomePage" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>e-Recruitment</title>
</head>
<body style="padding-left: 5px; padding-right: 5px">
    <style type="text/css">
        html, body {
            height: 100%;
        }

        .center {
            overflow: auto;
        }

        footer {
            position: fixed;
            height: 50px;
            bottom: 0;
            width: 100%;
        }

        .borderless td, .borderless th {
            border: none;
        }

        .checkboxlist-inline li, .radiobuttonlist-inline li {
            display: inline-block;
        }

        .checkboxlist-inline, .radiobuttonlist-inline {
            margin-left: 8px;
        }

            .checkboxlist-inline label, .radiobuttonlist-inline label {
                padding-left: 0;
                padding-right: 8px;
            }
    </style>
    <script src="../Scripts/jquery-3.2.1.slim.min.js"></script>
    <script src="../Scripts/popper.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>

    <script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <link href="../Scripts/jquery-ui.css" rel="stylesheet" />
    <form id="MainForm" runat="server" enctype="multipart/form-data">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Company" Name="Company.JavaScript.CompanyScript.js" />
            </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="MainUpdPanel" runat="server">
            <ContentTemplate>
                <div id="ParentDiv" class="container-fluid center">
                    <div class="row">
                        <div class="col-md-1">
                            <img src="../Content/Images/logonew.png" class="img-responsive" />
                        </div>
                        <div class="col-md-11">
                            <asp:ContentPlaceHolder ID="HeadContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <asp:ContentPlaceHolder ID="PageContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                </div>
                <footer class="footer fixed-bottom">
                    <table class="table table-hover">
                        <tr>
                            <td style="width: 10%">
                                <asp:Label ID="lblTheme" runat="server" Text="Site Theme"></asp:Label>
                            </td>
                            <td style="width: 20%; text-align: left">
                                <asp:DropDownList ID="ddlTheme" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlTheme_SelectedIndexChanged">
                                </asp:DropDownList>
                            </td>
                            <td style="width: 70%; text-align: right">
                                <small><i>&copy;<asp:Label ID="lblComp" runat="server" Text=" Company 2018"></asp:Label>
                                    &reg;<asp:Label ID="lblRights" runat="server" Text=" Some message"></asp:Label></i></small>
                            </td>
                        </tr>
                    </table>
                </footer>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

一切正常,页脚停留在底部,页面工作完美,但唯一的问题是当页面内容增加时它与页脚冲突,我的一个子页面中的一个保存按钮位于最底层页面,它是由我的页脚得到hiiden,用户可以查看按钮但无法点击,因为它正在惊吓我的页脚,如何避免此页面内容冲突到页脚。

0 个答案:

没有答案