Flexbox sticky footer в ASP.net masterpage

Я пытаюсь сделать свой нижний колонтитул в нижней части страницы, независимо от того, сколько у меня контента. Я хочу сделать это с помощью flexbox.Flexbox sticky footer в ASP.net masterpage

Я использую masterpages в ASP.net (Microsoft Visual Studio), но он просто не работает.

Я сделал 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; 
}

Я пробовал как%, так и vh в html CSS.

Я также пробовал в обычных 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

cool ... спасибо за upvote/отметьте ответ как принято :) – kukkuz

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

Если вы хотите, чтобы нижний колонтитул всегда находился внизу. Вам нужно объявить позицию фиксированной и нижней: 0. Я не думаю, что вы можете добиться этого, используя только flexbox.

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

источник

2016-08-16 09:06:54

Flexbox sticky footer в ASP.net masterpage

ответ

Смежные вопросы