How to make div scrollable, without hard-coding its height? Usually when you want to make div scrollable, you need to set max-height, otherwise it will be expanding.
#element {
overflow:auto;
max-height: 100px;
}
In my case, I want height to be restricted by parents height (and parent is resizable), not by setting it in CSS.
Here is JSFiddle:
http://jsfiddle.net/mbrnwsk/58qSc/1/
In order for the #content to stretch to fill the remaining space in the parent minus the height of the #title element, you can do it with either CSS or JS. The CSS solution is simple, but you will have to adjust the offset of the top to ensure that it fits properly. By setting the other three offsets (left, bottom and right) to zero, we thereby force the #content element to stretch out completely.
#parent {
border: 3px solid;
height: 150px;
position: relative;
}
#content {
overflow-y: auto;
overflow-x: hidden;
background: cyan;
top: 16px; /* This is based on the assumption that #title has a height of 16px */
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
http://jsfiddle.net/teddyrised/58qSc/3/
For a more responsive solution, you will need to rely on JS to fetch the height of #title, and then set the top property of #content accordingly — the advantage of this is that it will respond well when the viewport size changes, also when the height of #title changes.
For the CSS, it's the same as above but we remove the top declaration. Instead, we delegate this to JS instead:
$(function() {
$("#parent").resizable();
// Function to set height
var setContentHeight = function() {
$('#content').css('top', $('#title').outerHeight());
}
// Recalculate when viewport changes
// You can also bind this function to events that manipulate the dimension of #title
$(window).resize(setContentHeight);
// Run once when DOM is ready
setContentHeight();
});
http://jsfiddle.net/teddyrised/58qSc/4/
The advantage of the JS-based solution is that:
It is responsive — you can always recalculate top by binding the setContentHeight() function to any events that you can foresee will change the dimensions of #title.
You don't have to manually update the top value when you alter the paddings, margins, heights (min-, max- or height), line-height of #title, or any of its children (if they exist)
height:100%;
will set it equal to the parents height.
See it here
EDIT: The comment is right: Need to add padding to the parent
#parent {padding-bottom: 1em;}
Related
I have a nav bar which has a string of text for a link that opens a dropdown. The parent of this link has overflow: hidden to allow me to truncate the string incase it gets too long. However, I want the dropdown to be positioned absolutely underneath and centered regardless of the width of the parent. Since I'm using overflow: hidden, the dropdown gets cutoff. I want to keep the positioning of the dropdown as well as the overflow properties.
Is there a CSS fix for this? I know I can't ignore the parent's overflow property, but I'd rather not use position: fixed and manipulate margins with JavaScript if possible.
I've made a simple fiddle here
Thanks in advance!
Unfortunately there is no way in CSS to make a child of an overflow: hidden element show its contents outside the parent borders, you must change the hierarchy.
If that is not possible, you could add padding at the bottom to .nav-pull-left that is the size of your dropdown, although that's a rubbish solution..
.nav_pull_left {
width:auto;
height:50px;
padding-bottom: 80px;
overflow:hidden;
float: none;
border: 1px solid black;
white-space: nowrap;
}
You could also use JavaScript to dynamically update the height of your parent container when the dropdown shows but once again, reordering the hierarchy is best and cleanest.
If that is the way you want to go, let me know and I can help :)
May I suggest the following, where you change your css as follows.
.nav_pull_right {
min-height:50px; /* changed height to min-height */
...
}
.nav_pull_left {
min-height:50px; /* changed height to min-height */
...
}
.my_dropdown {
position: relative; /* changed absolute to relative */
margin: 0;
margin-left:-87px;
/* top: 2em; */ /* removed top */
left: 50%;
width: 170px;
z-index: 99999;
border:2px solid #929292;
}
With this your container overflow is kept and gets pushed down, the drop down menu is centered.
Is this something you could use?
Here is a fiddle demo
How do you make a child element stick to the bottom of its parent, even when overflowing? Please see this fiddle for a demo. In the demo the child container is denoted by a red border, as you can see now the child element is sticky to the top of the parent and overflowing from the bottom, which is natural. But I want the element to be sticky to the bottom and overflowing from the top. I can think of several relevant approaches right off my head:
Use position: relative on parent and use position: absolute; bottom: 0px on child. This doesn't work in my case since I don't want the child to be taken out of the flow.
As mentioned in this post I can utilize a css table to keep the element in the flow. But this doesn't really produce the desired effect, since I want the element to stick to the bottom of the parent even when overflowing.
The reason I want this effect is so when I animate the height of the parent, I have a nice "dropdown" effect on the child. Is there a way to accomplish the desired layout with css?
OK, I think I get what you are asking. The desired affect can be achieved by changing up your margins, padding, and height on the parent.
.parent {
padding-top: 200px;
height: 0;
background: #e0e0e0;
overflow: hidden;
}
.child {
height: 300px;
font-size: 80px;
border: 1px solid red;
}
The padding acts as the height in this case. Animating the height from 0 to height of child (300px) should give the desired affect.
Here's an update to the jsfiddle http://jsfiddle.net/8FeC9/2/
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");
}
As you can see here you need to apply a static height to #wrapper because else the div won't contain its children. (here is the fiddle) This is quite logical. I would want, however, that I can give #wrapper an auto height by which it can contain multiple rows of relatively positioned elements.
I suppose I could add an other wrapper around the individual items and position them staticly? But I would prefer to not add more HTML. If needed a JS/jQuery solution is possible.
There is an float is your child DIV's so you have to clear it's parent & remove height from it. write like this:
#wrapper {
background-color: white;
min-height: 360px;
margin: 50px auto;
overflow: hidden;
padding: 10px;
width: 1008px;
}
Check this http://jsfiddle.net/y5nYN/16/
An example of issue is here:
http://jsfiddle.net/yjjRW/1/
inner div because of 100% height and margin/padding is overflowing onto next row.
simple stuff..div inside td needs to be 100%, with some padding and margin.
divs inside all tds in the same row needs to be of same height.
I cannot set explicit height on them because their content is decided at runtime.
I can settle for a jQuery fix to this as well.
Thanks
Set the padding using percents rather than pixels. So give it a 5% padding for the top and bottom, then set the height to 90%.
http://jsfiddle.net/yjjRW/2/
CSS3 add to a DIV
box-sizing: border-box;
-moz-box-sizing: border-box;
Other approach would be use of positioning.
td {
position: relative;
}
div {
position: absolute;
top: 5px;
....
}
Or you can use JS solution which is a bit awkward. After page loads, check offsetHeight of each TD and set it to the its firstChild (nested DIV).