0

私は1つの問題に直面しています

ページのフッターが下がったままですが、中央にはありません。

その右揃え

中央揃えにしたい。

以前はダウンしていませんでしたが、以下で説明する .footerContent css を適用しました。

.footerContent を適用した後。フッターがページの下部にないという私の問題を解決しました。現在は一番下ですが、広範囲に表示されています。フッターの半分がカットされます。

皆さんは正解できますか？何が間違っているのか教えてください。

フッターを配置できるように、ここに画面を添付しています。 ここを参照

ここにマークアップ

<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <div id="header" runat="server">
        <%-- Menu goes here --%>
      </div>    
      <div id="masterpageContent" class="footer">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
      </div>  
    </div>
    <div class="footerContent">
        <div class="footerbrd">
        </div>
        <p class="clear">
        </p>
        <div class="footer">
            <div class="c1 fleft">
                Best viewed in IE8 and above with Resolution 1024x768
            </div>
            <div class="c2 fleft">
                (c) Copyright 2013 
                <br />
                All Rights Reserved.
            </div>
            <div class="c3 fright">
                Site by abc Team
            </div>
            <p class="clear">
            </p>
        </div>
    </div>
    </form>
</body>

そしてここにcss

/フッター開始/

.footerbrd {width:929px; height:1px; background:#ef0b14; margin:0px auto;}
.footer {width:929px; margin:0px auto; padding:5px 0px; color:#666666;}
.footer .c1 {width:300px; margin:0px; padding:0px;}
.footer .c2 {width:375px; margin:0px; padding:0px; text-align:center;}
.footer .c3 {width:254px; margin:0px; padding:0px 0px 0px 0px; text-align:right;}
ul.foot {list-style:none; padding: 0px 0px; margin: 0px;}
ul.foot li {list-style:none; float:left; line-height:12px;}
ul.foot li a {color:#666666; padding: 2px 10px; font-size:11px; text-decoration:none; display:block; float:left;}

.footerContent { 
    position: absolute;
    height: 50px;
    width: 929px;
    margin: auto;
    bottom: 0px;   
}

/フッター終了/

4

2 に答える 2

0

私はグーグルでこの質問を見つけ、あなたの問題の解決策を見つけました（少し遅れていますが、探しているすべての人にとって）

ページは次のようになります。

<html>
    <head runat="server">
        <title></title>

        <link rel="Stylesheet" href="../Scripts/layout.css" />

    </head>
    <body>
        <form id="form1" runat="server">
        <div id="wrapper">
            YOUR PAGE HERE      

          <div id="push">
          </div>
        </div>

        <div class="footer">
        YOUR FOOTER HERE    
        </div>
        </form>
    </body>
</html>

そして、「layout.css」ファイル (Web サイトの「Scripts」フォルダーに保存) に、これを追加します。

.wrapper 
{
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;  /*the bottom margin is the negative value of the footer's height*/
}
.push
{
    height: 20px;  /*'.push' must be the same height as 'footer'*/
}
.footer
{ 
    position: absolute;
    height: 20px;
    width: 99%;
    margin: auto;
    bottom: 0px;
    text-align: center;
}
于 2014-03-15T10:47:07.200 に答える