Question

我有一个单页的网站。它基本上是一个部分列表。其中一个部分有一个按钮，在单击时覆盖对话框。该对话框最终扩展了页面的宽度，并引入了侧面滚动条。

这真的破坏了外观，我希望对话框不会展开页面。

供参考，它与此处的布局相同：

http://www.polymer-project.org/components/core-animated-pages/demos/music.html

我尝试在有问题的部分设置max-width：100％和overflow-x：隐藏但无济于事。

这是有问题的部分标记：

<section id="music-section">
    <div class="music-container">
        <h1> About Us </h1>
        <h2> The following is our mission statement on campus. </h2>

        <div class="music-row">
            <music-demo></music-demo>
        </div>

        <div class="music-row">
            <music-demo-duplicate></music-demo-duplicate>
        </div>
    </div>
</section>

CSS：

.music-row {
    width: 100%;
    height: 330px;
}

.music-container {
    background: rgb(236, 183, 9);
    padding-top: 1%;
    max-width: 100%;
}

Answer 1

你正在使用＆＃34; position：absolute＆＃34;在你的div？你的元素不会与你的div对齐位置：绝对，其他原因可能是div的大小，在宽度和高度值中使用％。

Answer 2

不幸的是，您提供的CSS与您的HTML不对应。如果你有一个流畅的布局（根据屏幕/浏览器大小调整大小）和音乐部分的父容器是宽度：100％;或者在这种情况下max-width，这可能会导致我发现的问题。通常，子元素将扩展到父元素之外。对我有用的是：

.music-row {
    width: auto;
    height: 330px;
  }

将您的孩子设置为自动而不是100％。我希望它适合你。

div正在扩展页面的宽度

2 个答案: