无法在溢出时出现滚动条

I'm building a MDI WEB application, and have a window created made by a article element, with a header and a section for content. Since it's an MDI app, the article is set to absolute, so it can overlap other windows. I need a scrollbar to appear in the content section, but not in the header.

我正在构建一个MDI WEB应用程序,并且有一个由article元素创建的窗口,其中包含标题和内容部分。由于它是MDI应用程序,因此文章设置为绝对,因此它可以与其他窗口重叠。我需要一个滚动条出现在内容部分,但不在标题中。

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

It looks like the overflow: auto is ignored in Firefox (v 22), but the scrollbar does appear in Chrome.

它看起来像溢出:在Firefox中忽略auto(第22版),但滚动条确实出现在Chrome中。

Any ideas on how I make the scrollbar reliably when needed in the content section?

关于如何在内容部分需要时可靠地制作滚动条的任何想法?

2 个解决方案

#1

Your key problem is with padding value, so you need to set width decreasing some percentage in your article>section

您的关键问题是填充值,因此您需要在文章>部分中设置宽度减少一定百分比

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

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