天道酬勤,学无止境

Prevent Horizontal Scrollbar from Appearing in Overflowing Div

I am trying to prevent the scroll bar from appearing when the div .boxB overflows and I am unsure why my code is not working. In other words, I am trying to remove the horizontal scroll bar only when the browser width is less then the width of boxB. This way, the scroll bar will only appear when the browser width is less then .boxA.

http://imgur.com/yQDFG

The light blue represents the screen. The yellow is a background div, and the aqua is the foreground div where its width exceeds the screen width. In this case, I do not want the scroll bar to appear. I have used overflow-x:hidden but that did not do the trick.

HTML:

<div class="boxA">boxA  
  <div class="boxB">boxB</div>
</div>

CSS:

.boxA {
    background: yellow;
    width: 800px;
    height: 600px;
}

.boxB {
    background: aqua;
    width: 1000px;
    height: 400px;
        overflow-x: hidden;
}
标签

评论

Try this css:

.boxA {
    background: yellow;
    width: 800px;
    height: 600px;
    overflow-x: hidden;
}

.boxB {
    background: aqua;
    width: 1000px;
    height: 400px;

}

overflow must be on a tag which wraps too large content (in your case - boxA wraps boxB). So, if you do not want something to go outside wrapper - you must put overflow on wrapper

In your HTML code, boxeA is the parent and Box B is the child.

CSS property overflow used like this :

.boxeA
 {
     overflow: hidden;
 }

will prevent a part of the boxeB (which is the child of boxeA) to be displayed when it is more bigger than it's own parent.

boxeA is like a mask on boxeB.

in the url you have given, to prevent the aqua boxe to be entirly displayed, you have to put the aqua boxe as a child of the light blue one, and give the light blue box a css property like this :

.light_blue
 {
     overflow: hidden;
 }

Now that I understand what you want, here is a possible solution:

http://jsfiddle.net/dy8g5/3/

Parameters:

  1. .boxB must be visible outside of .boxA, with no horizontal scrollbar.

  2. The browser should not have a horizontal scrollbar, if the browser width is smaller than the width of .boxB

The solution was to use a media query to hide the horizontal scrollbar, IF the browser width is smaller than the width of .boxB

@media all and (max-width: 1001px) {
  body {
    overflow-x: hidden;
  }
}

@media all and (max-width: 801px) {
  body {
    overflow-x: visible;
  }
}

.boxA {
    background: yellow;
    width: 800px;
    height: 600px;
}

.boxB {
    background: aqua;
    width: 1000px;
    height: 400px;
    overflow-x: hidden;
}

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 防止100vw创建水平滚动(Prevent 100vw from creating horizontal scroll)
    问题 如果将元素设置为width: 100vw; 并且有一个垂直滚动条,元素的宽度将等于视口加上滚动条的宽度。 有可能防止这种情况吗? 是否可以在不禁用整个页面水平滚动的情况下防止这种情况发生? 除了更改css / markup以使元素占主体宽度的100%之外,我什么都没想到。 在Windows 8.1的Chrome版本43.0.2357.81 m和FF 36.0.1和Opera 20.0.1387.91中进行了测试 这是要求的代码: 例子 html <div class="parent"> <div class="box"></div> </div> <div class="tall"></div> 的CSS body { margin: 0; } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; position: relative; } .parent { background: rgba(0, 0, 0, .4); height: 100px; width: 5rem; margin-bottom: 25px; } .box { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .4)
  • 我需要删除溢出的水平滚动条(I need to remove the Horizontal Scrollbar on an overflown <DIV>)
    问题 我定义了一个 CSS 属性“溢出”设置为“滚动”的标签。 这给了我垂直和水平滚动条。 我只想要垂直滚动条。 我应该怎么办? 回答1 你可以尝试使用 overflow-y: scroll; 这将为您提供一个垂直滚动条... 使用 overflow-y: auto; 仅在必要时显示滚动条。 回答2 尝试使用“ overflow-y: scroll; ”代替。 它是 CSS3,但据我所知,所有现代浏览器(IE6+、FF、Opera、Chrome/Safari/WebKit/等)都支持它。 对于不熟悉它们的人,快速解释各种overflow / -x / -y值: visible - 默认值。 不适合的内容“溢出”框,通常出现在相邻内容的上方或下方。 hidden - 不适合的内容被“断头台” - 在盒子的边缘被切断。 auto – 不适合的内容会导致出现滚动条。 不一定会同时出现两个滚动条; 如果内容水平放置而不垂直放置,则只会出现垂直滚动条。 scroll – 类似于auto ,但无论是否需要都会出现滚动条。 AFAIK,如果需要将滚动条添加到动态(例如 AJAX)内容,则主要用于防止居中的内容“跳跃”。 回答3 overflow:auto; 回答4 我意识到这是一个非常古老的问题,但我今天偶然发现了它。 如果像我一样,你只想要 y 滚动条,然后只在需要时,我发现这有效:
  • horizontal scrollbar appearing, row having negative margin
    I want to create layout like this link:http://deqsastudio.com/projects/screen.png but the problem horizontal Scrollbar on the bottom not fixed which is keep moving.Like this: Code: <body> <!-- Header --> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div id="header" class="row"> <div id="logo" class="col-md-3">LOGO</div> <div id="nav" class="col-md-9">NAV</div> </div> </div> </div> <!-- Body --> <div class="row nav-header"> <div class="container"> <div id="switch-btn" class="col-md-3">SWITCH BUTTON</div> <div id="search" class="col-md-9">SEARCH
  • 出现水平滚动条,行有负边距(horizontal scrollbar appearing, row having negative margin)
    问题 我想像这个链接一样创建布局:http://deqsastudio.com/projects/screen.png 但是底部水平滚动条的问题没有固定,一直在移动。像这样: 代码: <body> <!-- Header --> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div id="header" class="row"> <div id="logo" class="col-md-3">LOGO</div> <div id="nav" class="col-md-9">NAV</div> </div> </div> </div> <!-- Body --> <div class="row nav-header"> <div class="container"> <div id="switch-btn" class="col-md-3">SWITCH BUTTON</div> <div id="search" class="col-md-9">SEARCH BUTTON </div> </div> </div> <div class="row"> <div class="container"> <div id="popular
  • 带有水平滚动条的 pre/code 元素破坏了 Firefox 上的 flex 布局(pre/code element with horizontal scrollbar breaks the flex layout on Firefox)
    问题 在我的基于 flexbox 的布局中,我可能有一个<pre><code></code></pre>元素(以及其他元素)。 由于它的内容可能比容器宽,我将其设置为overflow-x:auto 。 它在 Chrome 上完美运行: 但它在 Firefox 上被破坏了: 如果没有硬编码尺寸,我该如何解决? div,pre { padding: 5px; color: white; } .m { background: #222; display: flex; } .l, .r { background: #143; flex: 0 0 100px; } .c { background: #971; flex: 1; } pre { white-space: pre; word-wrap: normal; overflow-x: auto; } <div class=m> <div class=l>this must be 100px wide</div> <div class=c>this must take the remaining space</div> <div class=r>this must be 100px wide</div> </div> <div class=m> <div class=l>this must be 100px wide</div> <div
  • Bootstrap modal horizontal text overflowing
    With a large text input inside <p> tags the text overflows the bounds of the modal and off the screen requiring a horizontal scrollbar to read. I've copied the example code from the Bootstrap documentation and simply added a long text string inside the modal-body section. The example on the Bootstrap documentation website seems to word wrap the text correctly but my code does not. Here is my markup: <div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal
  • 水平滚动条只出现在页面底部(Horizontal scrollbar only appearing at bottom of page)
    问题 我有一个具有以下 HTML 结构的页面... <html> ... <body> <div class="wrapper"> ... </div> </body> </html> .wrapper被设置为min-width: 1100px ,原因我不会讨论。 因此,当浏览器调整到小于 1100px 时,我希望出现一个水平滚动条。 我的 CSS 如下: html { overflow-x: scroll; height: 100%; } body { overflow: auto; } .wrapper { min-width: 1100px; margin: 0 auto; } 出于某种原因,当您垂直向下滚动到页面底部时,唯一显示的水平滚动条是一个,它看起来有点像“在”主浏览器框架内,位于主浏览器水平滚动区域上方。 我希望窗口的主水平滚动条是可用的。 这是我的问题的图表:http://oi62.tinypic.com/r06m1z.jpg 还有一个代码笔:http://codepen.io/anon/pen/ocxvs 在此先感谢您的帮助! 回答1 这是因为您的文档( body )没有拉伸到视口( html )的整个高度,您需要分配height:100vh ,同时删除溢出设置,这样您就不会出现 2 个滚动条(一个在body一个在html )。 只需将您的 CSS 更改为:
  • Horizontal scrollbar only appearing at bottom of page
    I have a page with the following HTML structure... <html> ... <body> <div class="wrapper"> ... </div> </body> </html> The .wrapper is being set at min-width: 1100px for reasons I won't go into. Therefore when the browser is resized to less than 1100px I want a horizontal scrollbar to appear. My CSS is as follows: html { overflow-x: scroll; height: 100%; } body { overflow: auto; } .wrapper { min-width: 1100px; margin: 0 auto; } For some reason the only horizontal scrollbar showing is one when you've scrolled vertically down to the bottom of the page, and it appears sort of "within" the main
  • Bootstrap 模态水平文本溢出(Bootstrap modal horizontal text overflowing)
    问题 使用<p>标签内的大文本输入,文本会溢出模态的边界并离开屏幕,需要水平滚动条才能阅读。 我已经从 Bootstrap 文档中复制了示例代码,并在modal-body部分中简单地添加了一个长文本字符串。 Bootstrap 文档网站上的示例似乎正确地对文本进行了自动换行,但我的代码却没有。 这是我的标记: <div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 id="myModalLabel" class="modal-title">Modal Test</h4> </div> <div class="modal-body"> <p>Details below:</p> <p>TEST
  • 如何删除div中的水平滚动条?(How do I remove the horizontal scrollbar in a div?)
    问题 当我设置了overflow: scroll ,我得到了水平和垂直滚动条。 有没有办法删除div中的水平滚动条? 回答1 overflow-x: hidden; 回答2 别忘了写overflow-x: hidden; 代码应为: overflow-y: scroll; overflow-x: hidden; 回答3 使用overflow-y: scroll ,即使不需要垂直滚动条,它也始终会存在。 如果您希望y-scrollbar仅在需要时才可见,我发现这可行: .mydivclass {overflow-x: hidden; overflow-y: auto;} 回答4 的CSS overflow-y: scroll; 在jsFiddle上看到它。 请注意,如果您从overflow-y属性中删除了-y ,则会显示水平滚动条。 回答5 将此代码添加到您的CSS。 它将禁用水平滚动条。 html, body { max-width: 100%; overflow-x: hidden; } 回答6 无滚动(不指定x或y): .your-class { overflow: hidden; } 删除水平滚动: .your-class { overflow-x: hidden; } 删除垂直滚动: .your-class { overflow-y: hidden; } 回答7
  • How to disable horizontal scrollbar for table panel in winforms
    Hi I've a tablelayoutpanel and I'm binding controls to it dynamically. When the item count exceeds the height of panel obviously vertical scroll bar appearing there is no problem. But the same time horizontal scroll bar is also appearing even the items width is less than the width of panel. How can i prevent this?
  • 垂直滚动条指向水平滚动条(Vertical Scrollbar leads to horizontal scrollbar)
    问题 我的CSS看起来像这样: div.SOMECLASS { position: absolute; max-height: 300px height: auto; width: auto; overflow: auto; ... } div高度和宽度比例会自动缩放。 但是高度已固定为最大值:一旦达到此值,就会出现垂直滚动条。 这一切都很好。 现在的问题: 如果出现垂直滚动条,它们将用尽大约10像素的水平空间,因为滚动条将放置在div 。 但是,宽度不会自动缩放以允许垂直滚动条用完这些额外的10位数像素。 由于添加垂直滚动条之前的水平宽度正好适合内容(如width:auto设置所预期),因此div现在还显示了水平滚动条-允许丢失10个像素。 真傻 如何避免使用这些水平滚动条,而仅自动缩放div的宽度以适合垂直滚动条? 如果可能的话,我正在寻找一种解决方案,该解决方案不完全依赖于完全禁用水平滚动,因为在某些时候(例如,某些输入)可能需要这样做。 回答1 只是想出了一个相当可行的解决方案(至少对于我这个问题的版本而言)。 我认为width: auto的问题是它的行为类似于width: 100vw ; 问题在于,当出现垂直滚动条时,视口宽度保持不变(尽管滚动条为〜10px),但可视区域(如我所说的)却减小了10px。 显然,按百分比定义宽度是根据此“可见区域”定义的,因此将代码更改为:
  • How to keep a flex item from overflowing due to its text? [duplicate]
    This question already has answers here: Why don't flex items shrink past content size? (2 answers) Closed 3 years ago. I have the following layout in mind for a list. Each list item is represented by two columns. The second column should take up all available space, but it should be anchored to the right with its minimum size if the first column is taking up too much space. The first column should then show an ellipsis. The problem is happening in that last case. When the first column consists of too much text, instead of showing an ellipsis, it stretches itself out of the flexbox causing an
  • 溢出属性返回自动值[关闭](overflow property returning auto value [closed])
    问题 关闭。 此问题不符合 Stack Overflow 准则。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其成为 Stack Overflow 的主题。 7年前关闭。 改进这个问题 我已经应用了html,body{width: 100%; overflow-x: hidden;} html,body{width: 100%; overflow-x: hidden;}隐藏溢出的 html 但它导致滚动条似乎已经写成overflow-x: auto; . 为什么会这样? 这是屏幕截图: 在 Firefox 26.0、Google Chrome 版本 32.0.1700.76 m 中测试 回答1 如果您只想删除内部垂直滚动条,则可以使用以下内容: html, body { overflow-x: hidden; } body { overflow-y: hidden; } 隐藏水平滚动条上的两个html / body元件和指定overflow-y: hidden在上body元件,以除去所产生的内垂直滚动条。 这将保留html元素上的外部水平滚动条。 回答2 试试这个..... html,body{width: 100%; overflow: hidden;} 更新:在 div、img 标签等元素上使用width并将它们保持在 100% 宽度内,body 将为width:100
  • 防止子div溢出父div(Prevent child div from overflowing parent div)
    问题 我有一个包含标题部分和主体部分的父div。 父div具有最大高度,但没有最小高度。 请参阅以下示例:https://jsfiddle.net/1o79a6nc/2/ #cont { padding: 5px; background-color: red; max-height: 150px; max-width: 50%; } #body { background-color: blue; overflow-y: auto; overflow-x: hidden; } #head { background-color: green; } <div id='cont'> <div id='head'> <div>Head</div> </div> <div id='body'> <div>Body</div> <div>Body</div> <div>Body</div> <div>Body</div> <div>Body</div> <div>Body</div> <div>Body</div> <div>Body</div> <div>Body</div> <div>Body</div> <div>Body</div> <div>Body</div> </div> </div> 我希望主体仅扩展使其适合父项(包括填充),然后在必要时应用滚动条。 如示例所示
  • 位置:绝对导致水平滚动条(Position:absolute causes horizontal scrollbar)
    问题 当窗口调整大小(减小尺寸)使其超出其绝对位置时,绝对定位(侧面的黄色广告)的div会导致不必要的水平滚动条。 仅当窗口小于主#container时,滚动条才应显示,并且这些广告div不应影响布局。 他们是否被覆盖并不重要。 HTML: <div id='topbar'> <div id='menu'> <a href='#'>Link1</a> <a href='#'>Link2</a> <a href='#'>Link3</a> <a href='#'>Link4</a> </div> </div> <div id='container'> <div id='pushfix'></div> <div id='ad_container'> <div id='ad1'>ad</div> <div id='ad2'>ad</div> </div> Lorem ipsum placeholder text </div> CSS: body, html { height:100%; } body { margin:0; } #topbar { width:100%; background-color:#DCDCDC; height:40px; position:absolute; } #menu { width:250px; background-color:#B3B3B3
  • 检查 div 是否真的溢出和/或有滚动条(Check if div is actually overflowing and/or has scrollbar)
    问题 我们有一个带有<DIV style="overflow:auto; height:400px;> ... </DIV>部分的页面,其中填充了数据库中的信息。有时它包含的文本比可见的多(因此overflow:auto )和我们得到一个垂直滚动条。 如果文本溢出,我们希望将<DIV>部分的底部边框更改为红色- 因此当我们没有垂直滚动条时(= 红色底部边框表示有更多数据,因为人们并不总是看到注意滚动条)。 如何做到这一点? 设置“ border-bottom:1px solid red; ”将使底部边框始终为红色,即使文本量不指示溢出/滚动条,因此单独不会剪切它。 编辑:你们很快,谢谢! 我会研究这些建议 - 再次感谢! 回答1 if (myDiv[0].scrollHeight > myDiv.innerHeight()){ //this has overflowing contetent! } else{ //remove border, etc. } 回答2 css .attention{border-bottom:1px solid red;} js $.document(ready(function(){ var div = ('div#YOUR_OVERFLOW_DIV'); if ( (div).height()>400){ $(div).addClass(
  • 我可以防止div块中的文本溢出吗?(Can I prevent text in a div block from overflowing?)
    问题 我可以防止div块中的文本溢出吗? 回答1 如果您希望div中的溢出文本自动换行而不是隐藏或制作滚动条,请使用 word-wrap: break-word 财产。 回答2 你可以试试: <div id="myDiv"> stuff </div> #myDiv { overflow:hidden; } 请查看docs中的overflow属性以获取更多信息。 回答3 您可以使用CSS属性text-overflow截断长文本。 <div id="greetings"> Hello universe! </div> #greetings { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; // This is where the magic happens } 参考:http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts 回答4 简短答案 只需使用: word-wrap: break-word; white-space: pre-wrap word-break: break-word; 长答案 1. word-wrap 允许长单词能够折断并换行到下一行。 可能的值:
  • Check if div is actually overflowing and/or has scrollbar
    We have a page with a <DIV style="overflow:auto; height:400px;>...</DIV> section populated with info from a database. Sometimes it contains more text than is visible (hence overflow:auto) and we get a vertical scrollbar. We would like to change the bottom-border of the <DIV> section to red color IF the text overflows - and as such NOT when we don't have a vertical scrollbar (= the red bottom-border indicates there is more data, because people don't always see pay attention to the scrollbar). How can this be accomplished? Setting "border-bottom:1px solid red;" will make the bottom-border red
  • 如何在WinForms中禁用表格面板的水平滚动条(How to disable horizontal scrollbar for table panel in winforms)
    问题 嗨,我有一个tablelayoutpanel,我正在动态地将控件绑定到它。 当项目数超过面板高度时,显然会出现垂直滚动条,这没有问题。 但是同时,即使项目的宽度小于面板的宽度,也会出现水平滚动条。 我该如何预防呢? 回答1 int vertScrollWidth = SystemInformation.VerticalScrollBarWidth; tableLayoutPanel1.Padding = new Padding(0, 0, vertScrollWidth, 0); 回答2 停靠的TableLayoutPanel包含停靠的GroupBoxes和设置为100%宽度的单个Column时,我遇到了这个问题。 我不想为这些设置手动大小-我希望它们随表格一起调整大小。 奇怪的是,将TableLayoutPanel的Right Padding设置为1(而不是滚动条的宽度-如您所料,会留下滚动条大小的间隙)完全解决了该问题。 这是在C#2010 Express,.NET 4,Windows 8中。不知道此合并是否可以在其他变体上使用。 将padding设置为0似乎可以解决IDE中的问题,但是在实际运行时问题仍然存在。 给我闻起来像是TableLayoutPanel中的某种错误……或者也许这只是我拥有的控件和属性的特定组合(这是一个非常复杂的布局)。 回答3