ASP.netのマスターページのFlexboxスティッキーフッタ

私はどれくらいのコンテンツを持っていても、ページの一番下にフッタをつけようとしています。私はflexboxを使ってこれをしたいと思います。ASP.netのマスターページのFlexboxスティッキーフッタ

ASP.net（Microsoft Visual Studio）でmasterpagesを使用していますが、動作しません。

this fiddleに私のコードを付けました。

html { 
    height: 100vh; 
} 

.alignCenter { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.site { 
    display: flex; 
    min-height: 100%; 
    flex-direction: column; 
} 

.siteContent { 
    flex: 1; 
}

html CSSで％とvhの両方を試しました。

また、通常のHTMLとCSSで試してみましたが、this fiddleに表示されているように動作させることができます。

なぜASP.netでは動作しませんか？

出典

2016-08-16 mkr

それは現在flexboxで動作していない

のでthis-フォームにフレックス適用しようとしても、これを追加します。

form { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
}

ご意見をお聞かせください。ありがとう！

/* -------------- start of flexbox code ---------------- */ 
 

 
html { 
 
    height: 100%; 
 
} 
 
.alignCenter { 
 
    display: flex; 
 
    align-items: center; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    -webkit-box-align: center; 
 
    justify-content: center; 
 
} 
 
.site form { 
 
    display: flex; 
 
    min-height: 100%; 
 
    flex-direction: column; 
 
} 
 
.siteContent { 
 
    flex: 1; 
 
} 
 
/* -------------- end of flexbox code ---------------- */ 
 

 
/* -------------- Not so relevant for the flexbox problem ---------------- */ 
 

 
form { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
header { 
 
    width: 100%; 
 
} 
 
nav { 
 
    text-align: center; 
 
    height: 20vh; 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    vertical-align: middle; 
 
    padding: 20px 15px; 
 
    font-size: 22px; 
 
} 
 
/* footer */ 
 

 
footer { 
 
    height: 5vh; 
 
    background-color: red; 
 
}

<body class="site"> 
 
    <form id="form1" runat="server"> 
 
    <header> 
 

 
     <nav class="alignCenter"> 
 
     <!-- for vertical and horizontal alignment --> 
 

 
     <ul> 
 
      <li><a href="Default.aspx" title="">Forside</a> 
 
      </li> 
 
      <li><a href="portfolio.aspx" title="">Portfolio</a> 
 
      </li> 
 
      <li><a href="kontakt.aspx" title="">Kontakt</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    <main class="siteContent"> 
 
     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
 
     </asp:ContentPlaceHolder> 
 
    </main> 
 

 
    <footer> 
 
     <p>Some footer text</p> 
 
    </footer> 
 
    </form> 
 
</body>

出典

2016-08-16 09:28:36 kukkuz

@mkrはあなたのための上記の回答の仕事をしましたか？ – kukkuz

ありがとう、ありがとうございます:) 私はなぜそれが動作するのか理解するのを助けることができます、私はフォームを配置する理由は何も言いません。 – mkr

クール... upvoteのおかげで答えが受け付けられました:) – kukkuz

footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 5vh; 
    background-color: red; 
}

フッターを常に下にしたい場合は、あなたはposition fixedとbottom：0を宣言する必要があります。私はあなたがflexboxだけを使って達成できるとは思いません。

JSFiddle：あなたはあまりにもでネストされたフォーム要素を持っているようhttps://jsfiddle.net/8eep942d/5/

出典

2016-08-16 09:06:54

ASP.netのマスターページのFlexboxスティッキーフッタ

答えて

関連する問題