CSS to span column height to window height? - javascript

I want to make the left and right column span to the window height and give the user a scrollbar to independently scroll the two columns. How can I do this?
I've been trying min-height: 100% and height: 100% but it doesn't seem to work no matter where I use it.
I setup a JSFiddle here: http://jsfiddle.net/Legend/t5cUA/1/
EDIT: I don't want to add position: fixed. I still want the columns to align if the user reduces the width of his browser window.

You need to make sure all the previous wrappers are set to height: 100% and overflow: hidden. Something like this fiddle shows (may need some tweaks depending on what exactly you want):
html, body, .container-fluid, .container-fluid > .row-fluid {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar {
height: 100%;
overflow: auto;
}
Update from Clarification
You just need to continue the process deeper. The point is that you need to set the scroll on the actual column element(s) you want to scroll, and have everything else explicitly set to the height: 100% and overflow: hidden that wrap that column. Probably this for you:
html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar > div {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}

It you want to scroll content of left and right column independently you have to add
overflow: auto;
to it's CSS. Also, note, that 100% height can be set to children of relative or absolute block, or to children of block with defined height.

I'm not sure if I understand the question but if you want to span to the window height and put a scroll if the column is higher than the window:
.column {
overflow: auto /* scroll */;
height: 100%;
}
EDIT: Yes, overflow: auto will be a better option if you don't want to show a scroll if the column is not high enough.

Related

Hide horizontal off-screen overflow of a div that has a large width

How do I hide the horizontal, off-screen overflow of a <div> that has a large width set on it? For example:
HTML:
<div class="example">
</div>
CSS:
.example {
height: 100px;
width: 10000px;
background-color: black;
position: absolute;
overflow: hidden;
}
Here is an example fiddle that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.
Edit: Adding hidden overflow-x on the parent element does not work on small width iOS devices.
You can set overflow: hidden on the elements container. In this case it's the body.
body {
overflow: hidden;
}
You're nearly there!
Setting the overflow of the .example class is only hiding any overflowing content inside of it, though.
You would need to set the overflow of the parent container of .example, for this to work - i.e. whatever container it is inside of.
As you mentioned in your OP, you want to hide horizontal scrollbars.
For this, you would need to set
overflow-x: hidden
But (as mentioned), be sure this is on the parent container of .example.
This could be the body, or another div etc. HTH.
e.g.:
body, .parent-container {
overflow-x: hidden;
}
You can use overflow-x: hidden in CSS to hidde only horizontal scroll.

Element height increased after .animate() function

I created the following accordion slider:
JSFiddle demo
After I click on one of the list items, it triggers the .animate() function. My problem is, that after animation start rendering, the browser scroll-bar appears on the side for just a second. This is because the height of the list items increased a bit, but I can't figure it out why is it doing this.
You need to set overflow: hidden on the #vaccordion element, and also height. In this case I set the height in percent, so you need also define a height to the parents of #vaccordion too (html, body).
html, body{
width: 100%;
height: 100%;
}
#vaccordion {
list-style: none;
width: 100%;
height: 100%;
overflow: hidden;
}
FIDDLE: https://jsfiddle.net/8a5dsaqx/2/

Setting DIV's height automatically when it's lower than some specific value

I'm using a DIV to wrap a table to provide the scrolling feature as shown here: http://jsfiddle.net/WVjK5/1/
It works fine when the list is big, but when the list is small as shown here: http://jsfiddle.net/HJUuA/ you can see that the "Select All" and "Clear All" gets far from the first table which I don't want.
I know that the reason is the fixed height of DIV which is 300px. What I want is that the height of DIV should not be greater than 300px and if it is less than 300px then the DIV's height field should be changed automatically. So that the select all and clear all buttons come just below the table.
.tableScroll {
height: 300px;
overflow: auto;
}
I think you may want to just use
max-height: 300px;
instead of
height: 300px;
Try using max-height
Example from your 2nd JSFiddle:
.tableScroll {
max-height: 300px;
overflow: auto;
}
Here is a good resource for this property http://reference.sitepoint.com/css/max-height
Just change height to max-height.
http://jsfiddle.net/HJUuA/3/
.tableScroll {
max-height: 300px;
overflow: auto;
}
Use max-height instead of height.
.tableScroll {
max-height: 300px;
overflow: auto;
}

Change height on div with javascript

I want to set the height on a div when the div is more than 100px in height.
For example, when the content of the div makes the div's height fill more than 100px, I want it automatically fit to 200 px.
One way you can do this is to make sure there is no "height" attribute in the elements CSS (inline styling is fine). Then, when the content is changed call this function:
if ($('#myDiv').height() > 100) {
// Div is larger than 100px so increase it to 200px
$('#myDiv').css('height', '200px');
}
I think that the min-height CSS property is what you are looking for:
div#myDiv {
min-height: 100px;
height: auto;
display: block; /* float won't work */
}
This should automatically resize your div to wrap its whole content dynamically.
You can just work with min-height and max-height with CSS.
div#myDiv {
min-height: 100px;
height: auto;
max-height: 200px;
}
you could also do something with javascript as said, but with this you can also have the possibility that the height is 150px, or 120px. if you don't want that, You should do it the javascript-way.
You can try
if($("divID").height() > 100){
$("divID").css("height","200px");
}

overflow-x: hidden; overflow-y: inherit

I have a div (id="c_content) which I want to expand vertically depending on how long the content is without displaying the contents which overflow horizontally.
I am using the following code at the moment and it doesn't seem to work:-
#c_content {
min-height: 645px;
max-height: 2000px;
overflow-y: inherit; overflow-x: hidden;
}
When I use the above code, the content which overflows vertically is hidden. What should happen is, the div should expand vertically in order to show the content. But that doesn't seem to happen.
edit: when I set overflow-y: visible; instead of overflow-y: inherit;, I get a scroll bar for y axis (http://prntscr.com/108wsm) - still not what I wanted.
I would like to know if there is any way to fix this even if I have to user another code like Java or Jquery
Use cross browser min-height trick .. It will expand div when necessary.
#c_content {
min-height: 645px;
height:auto !important;
height: 645px;
max-height:2000px;
}
inherit is not a valid value for the overflow-y property. Try setting it to overflow-y:visible;

Categories

Resources