Question

使用Joomla扩展程序JCE Mediabox，我在灯箱中显示动态内容。我将高度设置为auto，这一切都可以使用，但在Chrome上（据说在Safari上），即使容器足够大，我也会收到滚动条：

直播网站： http://www.drumcafe.de/team/musiker - ＆GT;单击其中一位橙色名称

的音乐家

（我不能简单地将代码复制到JsFiddle，我必须包含整个插件）

容器的高度设置为auto / CSS
父级的高度由扩展名/ JS
Chrome报告的像素高度相同适用于容器和内容（均为整数）
容器中没有其他元素
内容未绝对放置或带偏移，也没有边框
容器设置为overflow-y: auto;，因为必须在较小的屏幕上提供更多内容

滚动条来自哪里？（我该怎样摆脱它？）

请记住，我需要overflow: auto

修改那么，你问了相关的代码，但是，如果没有周围的工作站点，我担心它本身可能没什么好处。这是：

HTML：

<div id="jcemediabox-popup-body" style="display: block; top: 0px; height: 889px; width: 1573px;">
    <div id="jcemediabox-popup-container" style="display: block;">
        <div id="jcemediabox-popup-loader" style="display: none;"/>
        <div id="jcemediabox-popup-content" style="display: block; width: 1573px; height: 889px; opacity: 1;">
            <div id="jcemediabox-popup-ajax" style="display: block;"> <!-- this is where the scrollbar occurs -->
                <div id="overall">
                    <div id="system-message-container">
                    </div>
                    <div class="item-page" itemscope="" itemtype="http://schema.org/Article">
                        <meta itemprop="inLanguage" content="de-DE">
                        <div itemprop="articleBody">
                            <div class="ma-box">
                                <img alt="20141012 drum-cafe-nathan-berg 038 foto mario-andreya Kopie thumb" src="/images/stories/bilder_musiker/20141012_drum-cafe-nathan-berg_038_foto_mario-andreya%20Kopie_thumb.jpg" height="330" width="220"/>
                                <div class="idbox">179</div>
                                <div class="maright">
                                    <p class="name">Nathan Lennart Berg</p>
                                    <p class="jahrgang">1979</p>
                                    <div class="vita">
                                        <ul>
                                            <li>Geb. in Minden</li>
                                            <li>Ab 1999 Malinke-Percussionausbildung bei verschiedenen Lehrern, v.a. Famoudou Konaté &amp; Söhnen</li>
                                            <li>2000/01 Ausbildung in trad. kuban. Percussion auf Kuba</li>
                                            <li>Ab 2004 Proben und Rhythmusunterricht in Trier</li>
                                            <li>2006/07 Ausbildung zum psycho-sozialen Coach</li>
                                            <li>2008 Auftritte mit der Gruppe DeruBey</li>
                                            <li>2009 Abschluss des Psychologie-Studiums (Diplom)</li>
                                            <li>2009 Rhythmusstudien-/Inspirationsaufenthalt in Guinea</li>
                                            <li>2009 Umzug und Gründung der Percussionschool Beat-Etage in Berlin</li>
                                            <li>2009 Anstellung in der ambulanten Jugendhilfe in Berlin – Rhythmusprojekte mit Familien</li>
                                            <li>2009/2010 Rhythmustrainings mit der Bigband Güstrow</li>
                                            <li>Ab 2010 professionelle Auftritte mit der Band SésséPercussion in Kooperation mit Tänzern</li>
                                            <li>Seit 2010 Durchführung interaktiver Trommelevents mit Drum Cafe Deutschland</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a id="jcemediabox-popup-next" href="javascript:;" title="weiter" class="jcemediabox-popup-link" style="display: none;"/>
        <a id="jcemediabox-popup-prev" href="javascript:;" title="zurück" class="jcemediabox-popup-link" style="display: none;"/>
    </div>
    <div id="jcemediabox-popup-info-bottom" style="display: block; visibility: visible; z-index: -1; top: 0px;">
        <a id="jcemediabox-popup-closelink" href="javascript:;" title="Schließen" class="jcemediabox-popup-link" style="display: block;">&nbsp;</a>
        <div id="jcemediabox-popup-caption" style="display: block;"/>
        <span id="jcemediabox-popup-numbers" style="display: block;"/>
    </div>
</div>

CSS：

#jcemediabox-popup-body {
    position: relative;
    overflow: visible;
    margin: 0 auto;
    z-index: 10002;
    max-width: 960px;
}

#jcemediabox-popup-container {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

#jcemediabox-popup-content{
display:block;
height: auto!important;
}

/* This is the container */
#jcemediabox-popup-ajax{
    display: block;
    max-width: 960px;
    height: auto!important;
    overflow: auto;
    border: 0;
    padding: 0;
    margin: 0;
    width: auto;
}

/* This is the content div */
#overall{
    max-width: 960px;
}

Answer 1

您需要覆盖JCE Mediabox样式，问题出在#jcemediabox-popup-ajax有溢出自动。如果您将css文件中的此类更改为：

#jcemediabox-popup-ajax{
overflow: hidden !important;
}

Chrome中不必要的垂直滚动条

1 个答案: