플렉스 박스 배치 - 스크롤이 100vh 본문으로 사라짐

나는 유연한 느낌을주기 위해 flexbox를 사용하여 멀티 컬럼 페이지 레이아웃을 구현하고 있습니다.플렉스 박스 배치 - 스크롤이 100vh 본문으로 사라짐

이것은 내 코드입니다.

@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin-ext,vietnamese'); 

* { 
    font-family: 'Inconsolata', Consolas, monospace; 
    padding: 0; 
    margin: 0; 
} 

html { 
    font-size: 14px; 
} 

body { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    padding: 10px; 
    box-sizing: border-box; 
    background-color: #fafafa; 
} 

dt { 
    margin-bottom: 3px; 
} 

dd { 
    padding-left: 10px; 
} 

h1, h2, h3, h4, h5, h6 { 
    margin-bottom: 10px; 
} 

nav a { 
    color: black; 
    text-decoration: none; 
} 

.current-position a:after { 
    content: ' /' 
} 

.current-position a:last-of-type:after { 
    content: none; 
} 

nav:not(.current-position) a { 
    display: block; 
    padding: 8px; 
    border-bottom: 1px solid darkgray; 
    color: dimgray; 
} 

nav a[class="active"] { 
    color: black; 
    border-bottom: 1px solid black; 
    background-color: #ebebeb; 
} 

article { 
    padding: 10px; 
} 

nav, aside { 
    padding: 10px; 
} 

h1 { 
    font-size: 1.9em; 
} 

h2 { 
    font-size: 1.7em; 
} 

h3 { 
    font-size: 1.50em; 
} 

h4 { 
    font-size: 1.4em; 
} 

article header { 
    border-bottom: 1px solid lightgray; 
} 

article section { 
    padding-left: 15px; 
} 

article em { 
    font-size: 0.9em; 
} 

article > section { 
    padding-left: 0; 
} 

section { 
    padding-top: 10px; 
} 

main { 
    flex: 1; 
    display: flex; 
    flex-wrap: wrap; 
} 

main nav { 
    flex-grow: 1; 
    min-width: 130px; 
} 

main aside { 
    flex-grow: 1; 
    font-size: 0.95em; 
    color: dimgray; 
} 

main article { 
    overflow-y: auto; 
    flex-grow: 1; 
    flex-basis: 50%; 
    min-width: 250px; 
    background-color: #ebebeb; 
    border-left: 1px solid lightgray; 
    border-right: 1px solid lightgray; 
    min-height:100px; 
} 

.title-site { 
    padding: 20px; 
} 

.title-site h1 { 
    font-weight: normal; 
    font-size: 2.5em; 
} 

.title-topic { 
    padding-bottom: 10px; 
} 

.current-position { 
    padding: 20px; 
    border-top: 1px solid lightgray; 
    border-bottom: 1px solid lightgray; 
} 

footer { 
    border-top: 1px solid lightgray; 
    padding: 10px; 
    text-align: right; 
    font-size: 0.8em; 
} 

@media only screen and (max-width: 800px) { 
    main aside { 
     display: none; 
    } 
}

JSFiddle link

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Index</title> 
    <link rel="stylesheet" href="basic.css"> 
</head> 

<body> 
    <header class="title-site"> 
     <h1>Test</h1> 
    </header> 
    <nav class="current-position"> 
     <a href="#">Test</a> 
    </nav> 
    <main> 
     <nav class=""> 
      <a href="#">Menu</a> 
      <a href="#">Menu</a> 
     </nav> 
     <article> 
      <header class="title-topic"> 
       <h1>Test</h1> 
       <em>Test</em> 
      </header> 
      <section> 
       <h2>Test</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum.</p> 
      </section> 
      <section> 
       <h2>Test</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum.</p> 
       <section> 
        <h3>Test</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis 
         bibendum.</p> 
       </section> 
      </section> 
     </article> 
     <aside> 
      <dl> 
       <dt>Test</dt> 
       <dt>Test</dt> 
       <dd> 
        <dl> 
         <dt>Test</dt> 
        </dl> 
       </dd> 
      </dl> 
     </aside> 
    </main> 
    <footer> 
     <address> 
      Test 
     </address> 
    </footer> 
</body>

JSFiddle에 임베드되어 있으면 100vh 값이 제대로 작동하지 않는 것 같아서 몇 개의 이미지를 게시하고 있습니다.

표준보기.

인 flexbox는 감쌌다. article에서 footer을 볼 수 있습니다.

어떻게이 상황을 방지합니까? 페이지를 잘못된 방식으로 디자인하고 있습니까?

출처

2017-10-07 LppEdd

당신은 article 요소에 최소 높이를 설정 한 : 화면에 그래서

main article { 
    min-height: 100px; 
}

가 100 픽셀보다 작은 크기

이 더 이상 축소 할 수 없습니다 있기 때문에, 요소가 바닥 글을 중복됩니다.

해당 규칙을 제거하십시오. Revised Fiddle.

출처

2017-10-07 11:31:06

이 수정 프로그램으로도 변경되지 않습니다. 여전히 메인> 문서와 바닥 글이 겹칩니다. 저는 웹에 적응하려고하는 데스크탑 프로그래머이고 그것은 미친 짓입니다. – LppEdd

아마도 원래 질문에 대한 오해가있었습니다. 'main'에서'overflow : auto'를 시도 했습니까? https://jsfiddle.net/g4guyL6f/2/ –

예 시도해 보았는데 중복 된 문제를 효과적으로 해결했습니다. 이제 탐색 (메뉴)이 기사와 함께 스크롤됩니다. 아마 내가 메인 바깥에 nav를 배치 할 방법을 찾아야 겠지. – LppEdd

플렉스 박스 배치 - 스크롤이 100vh 본문으로 사라짐

답변

관련 문제