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

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

ASP.net 마스터 페이지의 Flexbox 끈적한 바닥 글

답변

관련 문제