当它有绝对元素时溢出导致滚动做...</desc> <question vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { overflow-x: auto; } .content { position: relative; width: 100%; min-width: 800px; height: 200px; background-color: green; } .absolute { position: absolute; top: 50%; right: 0; background-color: red; height: 200px; width: 100px; } </style> </head> <body> <div class="wrap"> <div class="content"> <div class="absolute"></div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> <p>我有一个像上面这样的页面。</p> <p>出于某种原因，我为 <pre><code>.content</code></pre> 设置了最小宽度，所以我为 <pre><code>set overflow-x: auto;</code></pre> 设置了 <pre><code>.wrap</code></pre>。</p> <p>在<pre><code>.content</code></pre>中，我有一个<pre><code>absolute element</code></pre>。</p> <p>结果：</p> <p><a href="https://i.stack.imgur.com/Gq3Se.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0dxM1NlLnBuZw==" alt=""/></a></p> <p>如您所见，出现了一个<pre><code>scroll bar</code></pre>。</p> <p>如果我删除<pre><code>overflow-x: auto;</code></pre>中的<pre><code>.wrap</code></pre>：</p> <p><a href="https://i.stack.imgur.com/7m9vR.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tLzdtOXZSLnBuZw==" alt=""/></a></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { } .content { position: relative; width: 100%; min-width: 800px; height: 200px; background-color: green; } .absolute { position: absolute; top: 50%; right: 0; background-color: red; height: 200px; width: 100px; } </style> </head> <body> <div class="wrap"> <div class="content"> <div class="absolute"></div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> 当孩子有 <p><code>overflow-x: auto;</code><pre> 时，</pre><pre><code>absolute element</code></pre> 会导致滚动。但当浏览器屏幕很小时，我需要 <pre><code>overflow-x: auto;</code></pre> 来滚动内容。</p> <p>我该如何解决这个问题？</p> </question> <answer tick="false" vote="0"> <p>出现垂直滚动条是因为，根据 <a href="https://www.w3.org/TR/css-overflow-3/#ref-for-valdef-overflow-visible%E2%91%A0" rel="nofollow noreferrer">Overflow CSS 规范</a>：</p> <blockquote> <p>如果 <pre><code>visible</code></pre> 或 <pre><code>clip</code></pre> 之一既不是 <pre><code>overflow</code></pre> 也不是 <pre><code>auto</code></pre>，则 <pre><code>hidden</code></pre> 的 <pre><code>overflow-x</code></pre>/<pre><code>overflow-y</code></pre> 值分别计算为 <pre><code>visible</code></pre>/<pre><code>clip</code></pre>。</p> </blockquote> <p>由于 <pre><code>overflow-x</code></pre> 设置为 <pre><code>auto</code></pre> 并且我们的默认初始 <pre><code>overflow-y</code></pre> 值为 <pre><code>visible</code></pre>，因此 <pre><code>visible</code></pre> 值计算为 <pre><code>auto</code></pre>，从而形成垂直滚动条。</p> <p>因此，要删除垂直滚动条，我们可以将 <pre><code>overflow-y</code></pre> 值设置为 <pre><code>hidden</code></pre>：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.wrap { overflow-x: auto; overflow-y: hidden; } .content { position: relative; width: 100%; min-width: 800px; height: 200px; background-color: green; } .absolute { position: absolute; top: 50%; right: 0; background-color: red; height: 200px; width: 100px; }</code></pre> <pre><code><div class="wrap"> <div class="content"> <div class="absolute"></div> </div> </div></code></pre> </div> </div> <p></p> </answer> </body></html> - html - SO中文参考