无法使滚动条出现在溢出 [英] Can't get scroll bar to appear on overflow

问题描述

我正在构建一个MDI WEB应用程序，并具有一个由article元素创建的窗口，其中包含header和section作为内容.由于它是MDI应用程序，因此article设置为absolute，因此它可以与其他窗口重叠.我需要一个滚动条出现在内容部分，而不是header.

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.

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

在Firefox(v 22)中似乎忽略了overflow: auto，但是滚动条确实出现在Chrome中.

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

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

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

推荐答案

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

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

这篇关于无法使滚动条出现在溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！