오버플로시 스크롤 막대를 가져올 수 없습니다.

Question

MDI 웹 응용 프로그램을 작성하고 내용이 header 및 section 인 article 요소로 창을 만들었습니다. MDI 응용 프로그램이기 때문에 은 absolute으로 설정되어 다른 창과 겹칠 수 있습니다. 콘텐츠 섹션에는 스크롤바가 필요하지만, header에는 표시되지 않습니다.

<article id="win3"> 
    <header> … </header> 
    <section> … </section> 
</article> 

CSS : 그것은 overflow: auto처럼 보이는

article { 
    position: absolute; 
    min-width: 500px; 
    width: 918px; 
    margin: 0px; 
    padding: 0px; 
    overflow: hidden; 
    background-color: white; 
    border-style: ridge; 
    border-color: #ddd; 
    border-width: 4px; 
} 
article>section { 
    /* reduce diameter of rounded corner to match the inside curve of the border */ 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    display: block; 
    overflow: auto; 
    border: none; 
    width: 100%; 
    background-color: white; 
    padding: 10px 10px 10px 20px; 
    min-height: 50px; 
    height: 100%; 
} 

파이어 폭스 (22 절)에서 무시되지만 스크롤 막대가 크롬에 나타나지 않습니다.

콘텐츠 섹션에 필요할 때 스크롤 막대를 안정적으로 만드는 방법에 대한 아이디어가 있습니까?

Answer 1

키 문제는 패딩 값이다, 그래서 당신은 당신의 기사의 일부 비율> 섹션 빠른 응답

article>section { 
    /* reduce diameter of rounded corner to match the inside curve of the border */ 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    display: block; 
    overflow: auto; 
    border: none; 
    /*width: 100%;*/ 
    width: calc(100% - 30px) /* or set fixed width percentage like 90% */ 
    background-color: white; 
    padding: 10px 10px 10px 20px; 
    min-height: 50px; 
    height: 100%; 
} 

Answer 2

article { 
    position: absolute; 
    min-width: 500px; 
    width: 918px; 
    margin: 0px; 
    padding: 0px; 
    overflow: hidden; 
    background-color: white; 
    border-style: ridge; 
    border-color: #ddd; 
    border-width: 4px; 
    height:100px; 
} 
article>section { 
    /* reduce diameter of rounded corner to match the inside curve of the border */ 
    overflow:auto; 
    height:100%; 
    border:none; 
    display: block; 
    padding: 10px 10px 10px 20px; 
    min-height:50px; 
}