In this example...
HTML
<body>
<div>
<div>foo bar</div>
</div>
</body>
CSS
body, html, div {
height: 100%;
margin: 0;
}
div div {
display: inline-block;
overflow: hidden;
}
Why does overflow: hidden cause a vertical scrollbar? Additionally, why is this height not attributed to anything on the page? It's like an invisible margin.
The 100% height of all the elements is intentional. In theory, that should cause the inner-most div to expand to meet the viewport. And it does! ...so long as overflow: hidden is not there, Why?
The extra height is the same height as the height difference between vertical-align: baseline, and vertical-align: bottom. The "descender line". That's where the seemingly random "5 extra pixels" comes from. If the font size is 10 times as large, this gap will also be 10 times as large.
Also, it seems that when overflow: hidden is not there, the inline-block element has its baseline as the same baseline of its last line of text.
This leads me to believe that overflow: hidden forces the baseline of the entire inline-block element to be at the bottom of the element. Even though there is no text there, the parent of the inline-block element reserves space for the descender line. In the example given in the question, it cannot be easily seen since the parent of the inline-block element has height: 100%. So, instead, that extra space reserved for the descender line overflows out of that parent div.
Why is this space still there, even though there's no text? I think that's because the inline-block creates an inline formatting context, which is what causes this space. Were this element to be a block, it would only create this inline formatting context once it encounters an inline element or text.
This is just a theory, but it seems to explain it. It also explains why #Jonny Synthetic's answer works: adding overflow: hidden to the parent hides that extra descender line.
Thanks to #Hashem Qolami for the jsbins that gave me this theory.
Adding overflow: hidden to the parent div wasn't an option for me, and also because of my HTML's structure it wasn't working.
However, I noticed thanks to #Tony Gustafsson's comment in the OP that this does fix the problem:
div div {
vertical-align: bottom;
}
Items with a height of 100% need to have overflow: hidden as well. The first css rule only targets the outside div, the overflow hidden is being applied to the inside div.
Jsfiddle with this CSS and it worked fine:
body, html, div {
height: 100%;
margin: 0px;
padding:0px;
overflow: hidden;
}
div div {
display: inline-block;
overflow: hidden;
}
Related
I have a div and an image inside it
<div>
<img src="logo.png">
</div>
img {
float: left;
}
I can see the div have collapsed, the height have become to 0,
my first question is, but the image is inside the, cuz the div's height is 0,why the image still can be see?
I know the solution like give the div a overflow property, even to auto. But why it can solve the problem?
By default, a parent element will not wrap around floated content. (It would be annoying in many situations if it did.) So if you want it to do so, you need to force the container to enclose the floated element. overflow: hidden; is one way of doing it, though it's not always a viable solution. There are quite a few other ways of doing it, too, such as the "clearfix" method.
The overflow property works to contain floats because, to obey the rule, the containing element has to 'look and see' what's inside it. Normally, floated content is taken outside the document flow and mostly ignored by other elements.
Here are some other containment options for that div:
The "clearfix" method:
div:after {
content:"";
display:table;
clear:both;
}
Floating the container:
div.contain {
float: left;
width: 100%;
}
Using display: table:
div {
display: table;
width: 100%;
}
Using display: inline-block:
div {
display: inline-block;
width: 100%;
}
Using position: absolute;:
div {
position: absolute;
width: 100%;
}
Some of these are more useful than others, and context will determine which is and isn't appropriate in any particular layout. Generally, I stick with overflow: hidden unless some content needs to hang out of the containing element (such as in a drop down menu), in which case I'll normally use the "clearfix" option.
Floating elements doesn't affect the size of the parent element. As the div only contains floating elements, there is nothing that gives it height.
By setting the overflow style on the parent element (to anything but visible), you force it to contain its elements, so that they can be scrolled.
By not setting a specific size on the parent element, it will get the size from its children, and you don't get scrollbars. As the children are now contained, the floating elements will affect the size of the parent.
An alternative to using overflow on the parent element, is to add a non-floating child after the other, and use clear: both; on it so that it's below the floating children. That way the parent will contain the children because of that last non-floating child.
I have an option box filled with options, like this:
<div class="OptionBox">
<div class="Option">
<div class="AddRemoveIcon"></div>
<img src="images/users/user_1000000002.jpg">
<span class="Label">Student Name<span class="SubLabel">Student</span></span>
</div>
<div class="Option">...</div>
</div>
Styles are like this:
.OptionBox{
overflow: auto;
max-height: 200px;
max-width:300px;
display: inline-block;
}
.Option {
display: block;
}
.Option .AddRemoveIcon,
.Option img,
.Option .Label {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
I'm using inline-blocks because I like the vertical-align:middle, and the SubLabel span is not always present... But this problem occurs for float:left also...
My problem is when I have enough Options in the Option box to cause overflow-y. For whatever reason, the browsers size things correctly (ie, figure the width of each option and adjust the option box width accordingly), then add scrollbars. The result is that the widest options have their Label div bumped down a line because the scrollbars have removed X pixels from the Option box's width. When I switch to float:left for the children of an Option, the Label div wraps based on the scrollbars. In either case, the .OptionBox is never pushed to an optimum width for the widest option. The wrapping should only happen when the max-width is reached, right? Here's a fiddle of it.
What I'm after - and I'm sure I'm asking for the moon - is either a way to reposition scrollbars so they don't take away from the width of the OptionBox, or some magic CSS rule, which tells the browser to consider the scrollbars when sizing (kind of like how box-sizing:border-box tells the browser to consider padding/borders when setting the width of an element).
Any thoughts? Thanks in advance!
You should be able to fix this by setting your outer-most div to be overflow: hidden. That way you won't get the y-overflow and the scrollbar will not appear.
I'm pretty sure I saw some css to keep the scrollbar from coming up without this, but can't find it atm.
I've a big problem!
You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.
Now, if i want, the div shows its content in one line, what should I do? look at the simple code::
<div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
......(more than 100 other div, with unknown width)
</div>
NOTE: I don't know the content width.
I tried display: inline; and display: inline-block; and display: table;. they didn't work.
NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX!
Thanks ...
The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:
See: http://jsfiddle.net/4Yv83/
I also added overflow-x: auto, because presumably you don't want this.
Just tell the text inside the div not to wrap.
div {
white-space: nowrap;
}
a few years passed but ... I think it would be better to set overflow to hidden, because we don't need to show all of children elements at once. we use this kind of styling in thumb-slide like components. so I suggest to set "overflow:hidden" to parent element.
/* for parent element */
overflow: hidden;
I have an arbitrary amount of text that will be displayed in a confined space.
How can I trim the output so that whatever is "beyond" the box is not displayed, or how can I force the box to create a vertical scroll bar?
For HTML:
<div id="smallBoxWithLotsOfText">There is way more text in here than what
I have typed. I mean, this text is long. There is lots of it.
You can't even imagine how long this text is gonna get. No joking.
It's long; it's very, very long. It keeps going, and going, and going.
It's the Energizer Bunny of text. Like, seriously dude. It's crazy.
Absolutely crazy.
</div>
Try CSS:
#smallBoxWithLotsOfText {
width: 100%;
height: 100px;
overflow: auto;
}
The height property tells the box how high to be. The overflow property tells the box to add a scroll bar when the contents get bigger, but not to always have a scrollbar (like scroll does).
You can see this in action.
usually 'overflow: auto' should work if there is a set height/width. You can force a scroll bar with 'overflow: scroll'. You can hide anything with 'overflow: hidden;'
The key to overflow with CSS styles is the height and width have to be determined by the browser in order for it to know when to start overflowing.
The overflow property. You can set the value to hidden to hide the data and scroll to scroll the data.
<div class="text">this is some text that would be very long...</div>
//Hidden
.text
{
overflow: hidden;
width: 50px;
height: 50px
}
//Scroll
.text
{
overflow: scroll;
width: 50px;
height: 50px
}
Take a look at overflow. overflow: hidden clips content, overflow:Scroll adds a scrollbar.
How can I trim the output so that
whatever is "beyond" the box is not
displayed
Use overflow: hidden
How can I force the box to create a
vertical scroll bar?
Use overflow: auto. To use this, though, make sure you have a width/height specified on the box
You may try using ellipsis by adding the following in CSS:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
More ways to trim text and show ellipsis can be found here:
http://blog.sanuker.com/?p=631
What is the difference between overflow:hidden and display:none?
Example:
.oh
{
height: 50px;
width: 200px;
overflow: hidden;
}
If text in the block with this class is bigger (longer) than what this little box can display, the excess will be just hidden. You will see the start of the text only.
display: none; will just hide the block.
Note you have also visibility: hidden; which hides the content of the block, but the block will be still in the layout, moving things around.
display: none removes the element from the page, and the flow of the page acts as if it's not there at all.
overflow: hidden:
The CSS overflow: hidden property can be used to reveal more or less of an element based on the width of the browser window.
Overflow:hidden just says if text flows outside of this element the scrollbars don't show. display:none says the element is not shown.
Simple example of overflow: hidden http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden
If you edit the CCS on that page, you can see the difference between the overflow attributes (visible | hidden | scroll | auto ) - and if you add display: none to the css, you will see the whole content block is disappears.
Basically it's a way of controlling layout and element "flow" - if you are allowing user input (from a CMS field say), to render in a fixed sized block, you can adjust the overflow attribute to stop the box increasing in size and therefore breaking the layout of the page. (conversely, display: none prevents the element from displaying and therfore the entire page re-adjusts)
By default, HTML elements are as tall as required to contain their content.
If you give an HTML element a fixed height, it may not be big enough to contain its content. So, for example, if you had a paragraph with a fixed height and a blue background:
<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>
p {
background-color: #ccf;
height: 20px;
}
The text within the paragraph would extend beyond the bottom edge of the paragraph.
The overflow property allows you to change this default behaviour. So, if you added overflow: hidden:
p {
background-color: #ccf;
height: 20px;
overflow: hidden;
}
Then you wouldn’t see any of the text beyond the bottom edge of the paragraph. It would be clipped to the fixed height of the paragraph.
display: none would simply make the entire paragraph (visually) disappear, blue background and all, as if it didn’t appear in the HTML at all.
Let's say you have a div that measures 100 x 100px
You then put a whole bunch of text into it, such as it overflows the div. If you use overflow: hidden; then the text that fits into the 100x100 will not be displayed, and will not affect layout.
display: none is completely different. It renders the rest of the page as if if the div was still visible. Even if there is overflow, that will be taken into account. It simply leaves space for the div, but does not render it. If both are set: display: none; overflow: hidden; then it will not be displayed, the text will not overflow, and the page will be rendered as if the invisible div were still there.
In order to make the div not affect the rendering at all, then both display: none; overflow: hidden; should be set, and also, do something such as set height: 0;. Or with the width, or both, then the page will be rendered as if the div did not exist at all.
overflow: hidden - hides the overflow of the content, in contrast with overflow: auto who shows scrollbars on a fixed sized div where it's inner content is larger than it's size
display: none - hides an element and it completely doesn't participant in content layout
P.S. there is no difference between the two, they are completely unrelated
display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. Overflow hidden means that the tag is rendered with a certain height and any text etc which would cause the tag to expand to render it will not display. I think what you mean to ask is visibility:hidden. This means that unlike display none, the tag is not visible, but space is allocated for it on the page. so for example
<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>
display:none would be:
test | | test
visibility:hidden would be:
test | | test
In visibility:hidden the tag is rendered, it just isn't seen on the page.