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");
}
Related
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.
Could you please tell me why my background image not display completely .It only display upto the contend why ?I have only header in that so it display only small part of background image
Here is my code
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url(/login);
}
Actually I got the answer but
when I am trying to give margin to my header tag my background image come down .but my header title remain on same position on top .
see this
.headerTitle{
margin-left:2%;
margin-top:2%;
}
Try with this:
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
min-height: 500px;
}
Because the element with the background is only as high as the elements inside it. So in you wrapper there is only an h4-element with X amount of pixels high, so therefore the wrapper is also X amount of pixels high.
Try adding a min-height to your wrapper and see that the background follows. Like this:
#wrapper{
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
min-height: 250px;
}
https://jsfiddle.net/0tnjznt5/
Your css is doing exactly what you are telling it to do....
#wrapper is just that small slither showing with the background. If you want it to take up the entire page use .ionic-scroll in your css instead of #wrapper
See image:
http://screencast.com/t/l1ptRRNaDs
Try replacing #wrapper in your css with .button-bar, then try .ionic-scroll and see the results
.ionic-scroll {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you want the full image to display inside #wrapper and you know the image height you can set #wrapper height and width like so:
#wrapper{
height: 1000px;
width: 1000px;
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you don't know the height and width of your image I would suggest using an <img> tag inside #wrapper instead... This will cause #wrapper to adjust to the size of the image
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;}
How to increase a background size automatically when a new item is added to its page dynamically.
#container1 {
background-image: url(wallpapers.jpg);
height: auto;
}
#mid {
background-image: url(scripts/white.png);
width: 950px;
margin-left: 210px;
height: 1700px;
}
HTML
<div id="container1">
<div id="mid">content goes here</div>
</div>
I am unable to increase the background size beyond the height it defines even if I define it as auto not able to increase the size automatically when a new item is added.
please help I am in a need of it for my college project.
Thanks in advance waiting for your replies.
The div #container takes up the height of its child element, i.e, #mid, which in this case has a height of 1700px. Thus your content is overflowing from that div element(#mid).
You can either remove the height property from #mid, or have an overflow-y: scroll;.
Use background-size property. It might be help you.
#container1 {
background-image: url(wallpapers.jpg);
height: auto;
background-size: 100% auto;
}
I believe a div if not styled to have definite height and width will grow and shrink according to the elements within the div.
add background-size: auto 100%; this value to #container1 div in css
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.