Flexbox sticky footer in ASP.net masterpage

Ich versuche, meine Fußzeile am Ende der Seite bleiben, egal wie viel Inhalt ich habe. Ich möchte dies mit Flexbox tun.Flexbox sticky footer in ASP.net masterpage

Ich benutze Masterpages in ASP.net (Microsoft Visual Studio), aber es funktioniert einfach nicht.

Ich machte this fiddle mit meinem Code.

html { 
    height: 100vh; 
} 

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

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

.siteContent { 
    flex: 1; 
}

Ich probierte% und vh in der HTML-CSS.

Ich habe auch in regulären HTML-und CSS versucht und ich kann es dort arbeiten gezeigt in this fiddle.

Warum funktioniert es nicht in ASP.net?

Quelle

2016-08-16 mkr

Es ist nicht gerade arbeitet mit flexbox, wie Sie ein Formular-Elemente in zu verschachtelt haben

So versucht this- zum Formular flex gelten und auch hinzufügen, um diesen:

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

Überprüfen Sie und lassen Sie mich Ihr Feedback wissen. Vielen Dank!

/* -------------- 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>

Quelle

2016-08-16 09:28:36 kukkuz

@mkr hat die obige Antwort für Sie arbeiten? – kukkuz

Es tut, vielen Dank :) Könnten Sie mir helfen zu verstehen, warum es funktioniert, bekomme ich nicht, warum die Positionierung der Form nichts zu sagen hat. – mkr

cool ... danke für die upvote/markieren Sie die Antwort als akzeptiert :) – kukkuz

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

Wenn Sie die Fußzeile immer an der Unterseite möchten. Sie müssen die Position fixed und bottom: 0 deklarieren. Ich denke nicht, dass Sie es erreichen können, indem Sie nur flexbox verwenden.

JSFiddle. https://jsfiddle.net/8eep942d/5/

Quelle

2016-08-16 09:06:54

Flexbox sticky footer in ASP.net masterpage

Antwort

Verwandte Themen