I've been working on making a drop-down menu that has a max-height, and puts vertical scrollbars on the element if it exceeds it. For some reason, when this vertical scrollbar is added, the width does not automatically adjust to compensate for the width of the vertical scrollbar, and creates a horizontal one as well.
Here is a fiddle so you can see a simplified version of my problem. Anyone have a good solution (besides setting a width on it, because I want it to adjust to the content inside, and preferably no JavaScript)?
.wrapper { display:inline-block; max-height:200px; overflow-y:auto; background:#f00;}
.wrapper > a { display:inline-block; padding:20px; white-space:nowrap; }
You can use overflow-y:scroll.
.wrapper {
overflow-y:scroll;
overflow-x:hidden;
}
Fiddle: http://jsfiddle.net/4e00dp7w/2/
Note that overflow-x:hidden is not really needed, but just in case.
When the vertical scrollbar is added, it will take some space from inside the container, in this case .wrapper. To avoid this, you can add overflow-x: hidden to your .wrapper. class like this:
.wrapper {
display:inline-block;
max-height:200px;
overflow-y:auto;
background:#f00;
}
However, as i said, it takes space from inside the container, so your content may be overlayed by the scrollbar. A workaround to this problem is adding a little padding to your .wrapper class to compensate this space ocupied by the scrollbar.
.wrapper {
display:inline-block;
max-height:200px;
overflow-y:auto;
background:#f00;
overflow-x: hidden;
padding-right: 10px;
}
Working sample: http://jsfiddle.net/4e00dp7w/7/
I would set...
.wrapper{
overflow-x:hidden;
overflow-y:auto;
}
that way a scroll bar will only show if the inner content is taller than the wrapper.
Related
table > tbody {
height: 600px;
display: block;
overflow: auto;
}
table > tbody > tr {
width:100%;
height: 1440px;
display:table;
table-layout:fixed;
}
This css makes a scrollable 'table', or scrollable 'tr'. It WORKS. But my problem is that I have a 'div' inside 'td's inside the 'tr'. And when I set the height of 'div' to 100%, or any height so that the whole 'div' is not within the visible range of tbody, in this case within 600px, the scrollbar for the document appears. The scrollbar for the table is the same with and without 'div'.
The scrollbar of the document extends as long as where the bottom of 'div' should be "behind" the 'tbody'. When I scroll the table, there is NO change to the scrollbar of the document.
Here is a very rough version of my problem: https://jsfiddle.net/hL8hemka/14/
As you can see, there are two scrollbars. If you can't see two, try deleting div { height: 100% } in the css section. You will notice one of two bars on the right (where the document scrollbar should be) disappearing.
How do I make a div with 100% height of tr without scrollbar on the document?
I'm not seeing two scrollbars in your fiddle, unless you mean that there is a horizontal and a vertical scrollbar?
Either way, if you want to hide a scrollbar on any element simply set the overflow-x or overflow-y (depending on if the scrollbar is vertical or horizontal) to hidden. For example, if I wanted to hide a vertical scrollbar I would set overflow-x to hidden in my css like so:
body {
overflow-x: hidden;
}
Just disable the scrollbar:
body
{
overflow: hidden;
}
fiddle
That's because of you have added a border to td, remove that and it fit everything properly. The scrollbar at x-axis hides.
td {
border:none;
}
div {
border: 1px solid #111;
height: 100%; /* Removing this hides the 'document' scrollbar*/
}
If you don't have any other element in the table cells i suggest you to use a different approach.
Instead of set height to the div you can position it as an absolute element. This way you can dimension it using top, left, right and bottom properties.
td {
position:relative;
}
td > div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
I have 3 divs with scrollbar. if we move one scrollbar and it reaches end of scrolling area page also scrolls.
I want to fix this issue.
Fiddle for it. http://jsfiddle.net/78h8e88x/2/
html, body {
height: 100%;
position:relative;
}
body
{
line-height:100px;
text-align:center;
}
.left
{
position:absolute;
margin-left:5%;
margin-top:3%;
display:block;
height:80%;
width:20%;
overflow:auto;
}
.center
{
position:absolute;
margin-left:25%;
margin-top:3%;
display:block;
height:80%;
width:50%;
overflow:auto;
}
.right
{
position:absolute;
margin-left:75%;
margin-top:3%;
display:block;
height:80%;
width:20%;
overflow:auto;
}
if we move one scrollbar and it reaches end of scrolling area page also scrolls.
The body element gets a margin of 8px by default (in Chrome at least). In the case of your fiddle this makes the content slightly bigger then the window and thus a scrollbar appears. Setting the margin to 0 on the body will remove this scrollbar. See jsfiddle: https://jsfiddle.net/vbvmLbmq/
That of course only fixes the scrolling behaviour in your fiddle which was a matter of window size. You can prevent scrolling on the html,body elements entirely by adding the overflow: hidden; css rule to them but keep in mind that would also hide any elements that flow past the height of those elements.
Continuing the scrolling of the page after a child elements scrolling has reached its end is browser application behaviour, which you cannot influence with javascript on your page.
I have a div with a height of 100% and a solid border. when i have too much content, it will display outside the div border.
how do i expand the div to the height of all the content inside the border instead of just 100% of the screen size?
the height:100% seems to be measuring the screen height but not the content inside of it.
<style>
#container{
height:100%;
width:100px;
border:1px solid black;
}
</style>
<div id="container">
link to problem sample page
Such a problem can be easily solved using the elusive clearfix! First off, remove all those height:100%; declarations you have for your #container, they're not needed, and try this in your CSS:
#container:before, #container:after {
display: table;
content: "";
zoom: 1;
}
#container:after {
clear: both;
}
absolutely positioned elements do not change the height of their container. Your farbartastic element has absolute positioning, so it will be laid out without informing its container of its height requirements.
You have some problems with yours floating element (which are flying outside the container), so , for correct this use overflow:hidden in the container
#container{
width:100px;
border:1px solid black;
overflow: hidden;
}
I was wondering how I could achieve this effect. Firstly content currently is in a div called 'contentDiv'. I have all the following content float:right of the div. What I want to achieve is an imaginary border (look at image) in which the content cannot cross.
Then I want the content to be centered.
How would I achieve this with CSS? Or what elements could I use to replicate this effect.
I have looked into centering the content and this code works for me -
margin-left: auto;
margin-right: auto;
#contentDivParent {
/*It will define the imaginary border*/
padding-left:30%;
width:70%;
}
#contentDiv {
/*remove the float*/
float:none;
/*center*/
margin:0px auto;
/*force line-break*/
max-width:100%;
}
I would like to align my container div to center vertically just like it is aligning himself horizontally because of margin: auto;. I've searched some time on google on how to do that but it does not seem to be working for me. Maybe there is some kind of universal way to do that, as easy as margin: auto; method for horizontal centering? Because it seems for me very strange that we live in 2011 year and there is still no simple css command for doing this task...
#container
{
margin: auto;
width: 960px;
height: 640px;
background-color: brown;
}
There are tons of tutorials for vertical alignment, especially for IE, which needs special care. One of them: Vertically center content with CSS. Also another answer here.
Can it be even simpler...
html, body {
overflow:hidden
}
#container {
width:960px;
height:640px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-480px;
background:brown
}
The overflow:hidden is to hide the scrollbar that appears (html for IE6 and body for IE5). I don't know why this happens.
But if you want to keep it scrollable if the browser window is smaller, just make the height 639px and remove the overflow:hidden.
If your div has a fixed height, you can align it vertically by adding another div (with a float) with a negative margin (half the height of the main div) and then alter your div's CSS (adding the clear).
Also don't forget to specify the 100% height of the html and body, without that it doesn't work.
Like this:
CSS:
html {
overflow: auto;
}
html, body {
margin:0;
padding:0;
height:100%;
}
#alignDiv {
float:left;
height:50%;
margin-bottom:-320px; /* half the centered div */
width:1px;
}
#container
{
margin: 0 auto;
width: 960px;
height: 640px;
background-color: brown;
clear:left; /* without the clear it won't center */
}
html:
<div id="alignDiv"></div>
<div id="container"></div>