끈적한 바닥 글 문제, 넓은 브라우저 지원을 제공하는 2 열 응답 레이아웃

어려운 레이아웃 문제가 있습니다. I는 다음의 레이아웃을 생성해야끈적한 바닥 글 문제, 넓은 브라우저 지원을 제공하는 2 열 응답 레이아웃

개의 동일한 높이 열
점착 글
응답 (왼쪽 탐색 열이 100 %로 축소 (광 콘텐츠 하단에 위치 무거운 콘텐츠 페이지가 밀려)
와이드 브라우저 지원) 모바일 중단 점에서() 아래 IE9에뿐만 아니라

데스크톱 레이아웃을 모바일 장치를 지원해야합니다

을

Desktop Layout

모바일 레이아웃 :이 그들 모두를위한 여러 솔루션을 검토 한 결과

Mobile Layout

정말에만 내 요구 사항의 일부을 해결한다. 아직 전체 솔루션을 찾지 못했습니다. 심지어 성배도 그 솔루션의 많은 flexbox, CSS 그리드, 또는 CSS 테이블을 사용하고 있기 때문에 IE9 polyfill없이 지원하지 않습니다 (어느 내가 수 할 수 있지만 레이아웃?!).

나는 누군가가 이것을 알아 냈다고 확신합니다!

http://csslayoutgenerator.com/

난 당신이 설명하는 것처럼 끈적 끈적한 바닥 글과 레이아웃을 생성 할 수 있었다 :

출처

2017-05-16 John Rotondo

왜 이렇게 부트 스트랩을 살펴 보지 않겠습니까? 그것은 그것이 만들어진 이유입니다. :) –

어떤 grails 버전을 사용하고 있습니까? – elixir

엘릭서, 나는 Grails를 사용하지 않고있다. 이것은 Java/Angular2 응용 프로그램에 있습니다. 나는 A List Apart 기사에서 언급 한 성배 레이아웃을 언급하고 있었다 : https://alistapart.com/article/holygrail –

당신은 CSSLayoutGenerator을 시도해야합니다.

출처

2017-05-16 18:30:49 trevorp

괜찮은 도구이지만, 모든 요구 사항을 충족시킬 수는 없다. 꼬리말의 경우 "꼬리말을 브라우저 창 하단에 유지"또는 "같은 높이의 열을 에뮬레이트"중에서 선택할 수 있습니다. 나 둘 다 필요해. –

CSS로이 작업을 수행 할 수 있어야합니다. http://stackoverflow.com/a/19220042/1839504 – trevorp

그 중 하나가 작동하지 않습니다. 내용은 페이지 접기 아래에 꼬리말을 밀어 내지 않습니다. 대신 꼬리말은 내용을 덮어서 꼬리말 뒤에 스크롤하도록합니다. –

CSS flexbox를 사용하여 해결해야하며, Flexibility과 같은 polyfill을 사용하여 이전 IE 지원을 얻으십시오.

여기에 Flexbox를 사용하여 작동하는 Codepen이 있습니다.

html, body { 
 
\t margin:0; 
 
\t padding:0 
 
} 
 
.wrap { 
 
\t display: flex; 
 
\t min-height: 100vh; 
 
\t flex-direction: column; 
 
\t max-width:1200px; 
 
    margin:auto; 
 
} 
 
.main { 
 
\t flex: 1; 
 
\t display:flex; 
 
} 
 
footer, header { 
 
\t background:green; 
 
\t padding:10px; 
 
} 
 
.sidebar { 
 
\t background:blue; 
 
\t flex:0 0 300px; 
 
\t padding:10px; 
 
} 
 
.content{ 
 
\t background:yellow; 
 
\t padding:10px; 
 
\t flex:1; \t 
 
} 
 
@media screen and (max-width:680px){ 
 
\t .sidebar{flex: 0;order:0} 
 
\t .main {flex-direction:column;} \t 
 
}

<!-- could use body element instead of wrap if wanted --> 
 
<div class="wrap"> 
 
    <header>Header</header> 
 
    <main class="main"> 
 
    <div class="sidebar">Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar </div> 
 
    <div class="content">Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content </div> 
 
    </main> 
 
    <footer>footer - <a target="blank" href="http://codepen.io/paulobrien/full/FKAxH/">See display table version of sticky footer</a></footer> 
 
</div>

그것은 나이가 IE에 의해 지원 될 수있는 순수 CSS와 해결책을 찾기 위해 좋은 것입니다,하지만 난 거기 얻기 위해 추가 코드를 부풀게 가치가 있다고 생각하고, 특히 사용자의 비율이 더 낮습니다.

출처

2017-05-17 19:36:53

끈적한 바닥 글 문제, 넓은 브라우저 지원을 제공하는 2 열 응답 레이아웃

답변

관련 문제