2

私は MDI WEB アプリケーションを構築しており、コンテンツ用の aと aをarticle持つ要素によって作成されたウィンドウを持っています。MDI アプリなので、が に設定されているため、他のウィンドウと重ねることができます。コンテンツ セクションに表示するにはスクロールバーが必要ですが、.headersectionarticleabsoluteheader

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

CSS:

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%;
}

overflow: autoFirefox (v 22) では無視されているようですが、Chrome ではスクロールバーが表示されます。

コンテンツ セクションで必要なときにスクロールバーを確実に作成する方法についてのアイデアはありますか?

4

2 に答える 2

3

あなたの主な問題はパディング値にあるため、記事>セクションで幅を数パーセント減少させる必要があります

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%;
}
于 2013-08-05T03:17:35.440 に答える
0 
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;
}
于 2013-08-05T03:02:29.260 に答える