I have a Fixed positioned DIV whose content is appended using jquery.
When its height become greater than the screen size i cant see the contents at the bottom of the DIV.
To see the lower down i need to use zoom tool of the browser.
Is it possible that div becomes scrollable if its height increased than a specific limit.
Any help is appreciated.
You can set the max-height CSS property on the div, and it will increase to be no larger than the value you specify. Then set overflow: auto to make it scrollable when content is outside of the viewable area.
Use css to get scrolling functionality:
overflow: scroll
Assign a class to div
try this ..
.className
{
height:100px; \* default hight of the div*\
overflow: auto;
}
Try something like:
set height: auto; If you want to have minimum height to x then you can write
height:auto;
min-height:30px;
height:auto !important;
height:30px;
just set max-height for the div
*html yourdiv {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
overflow:auto;
}
yourdiv{
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
overflow:auto;
}
Related
Here is my jQuery - I will explain what I want to do:
I've added 100vw to my section:before selector, but the problem is that the horizontal scroll has appeared (because 100vw adds scroll width to 100vw).
I figured that the way to get around the horizontal scroll issue is to apply $(window).width() to my section:before selector, this way my 100vw won't calculate the scrollbar in.
This is how I fiddle it should be done (but I don't know yet how to achieve this):
select :before element in jQuery
set :before width style to $(window).width()
horizontal scroll is gone.
Any ideas how to do it?
CSS:
section {
width:500px;
height:100vh;
margin:0 auto;
background: #222226;
}
section:before {
content: 'this is my before';
position: absolute;
width: 100vw;
z-index:-1;
background: #ccc;
top:0;
bottom:0;
right:0;
left: calc(-50vw + 50%);
}
jQuery (I know it is wrong because :before is not part of DOM model but his is the idea):
$(document).ready(function() {
var window = $(document).width();
$('section:before').css("width", window);
});
Not really sure why you're doing what you're doing but... set the overflow-x property to hidden;
overflow-x: hidden;
It also might be worth it to set margin and padding to 0 in your :before element;
I have a problem with my nav scroll. I would just scroll the nav but I can't.
Here is my JSFiddle: JSFiddle
For see my problem you must click on menu
If anyone have a solution I would be very grateful.
You have 2 problems.
First, .mask has z-index of 10000 whereas it should be less than .pushmenu.
Second, .pushmenu should have overflow-y set to auto, this will add the scrollbar automatically when the content height exceeds its container height. In this case, the window's height.
.mask {
z-index: 999; /* change this accordingly--must be less than .pushmenu's z-index */
}
.pushmenu {
overflow-y: auto;
}
updated fiddle
How can i set minimum width for div . My problem is i am dynamically loading content in a div some time it is large and some time it is small.
if it is small then behind div becomes invisible so i want to avoid that . and set div to minimum equal to parent div height or if content is more than auto ??
CSS::
#middle_overlay
{
position:absolute;
/*border:2px solid #008080;
background-color:#CCCCCC;*/
background-image:url(../images/bg2.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
height:auto;
width:100%;
display:none;
}
Would min-width:xxx; work for you?
The min-width CSS property is used to set the minimum width of a given
element. It prevents the used value of the width property from
becoming smaller than the value specified for min-width.
See here for further information
min-width - This prevents the value of the width property from becoming smaller than min-width. min-width:450px; or min-width:50em;
#middle_overlay
{
position:absolute;
/*border:2px solid #008080;
background-color:#CCCCCC;*/
background-image:url(../images/bg2.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
height:auto;
width:100%;
display:none;
min-width:450px; //50em
}
Note: The value of the min-width property overrides both max-width and width.
I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?
You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.
It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.
Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.
See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}
You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.
If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.
What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment.
I thought to make the horizontal alignment using:
margin-left: auto;
margin-right: auto;
like I did here.
Is this a good cross browser solution for horizontal alignment ?
How could I do the vertical alignment ?
Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end.
#content {
width: 300px;
margin: 0 auto;
}
This is perfectly crossbrowser compatible.
Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.
Here's a copy'n'paste'n'runnable example:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
}
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
That said, vertical centering is usually seldom applied in real world.
If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.
"Vertical centering is only possible if the element is positioned absolutely and has a known height." – This statement is not exactly correct.
You can try and use display:inline-block; and its possibility to be aligned vertically within its parent's box. This technique allows you to align element without knowing its height and width, although it requires you to know parent's height, at the least.
If your HTML is this;
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
And your CSS is:
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
}
Then #aligned-middle will be centered within #container. This is the simplest use of this technique, but it's a nice one to be familiar with.
Rules marked with "/* for IE < 8 */" should be placed in a separate stylsheet, via use of conditional comments.
You can view a working example of this here: http://jsfiddle.net/UXKcA/3/
edit: (this particular snippet tested in ie6 and ff3.6, but I use this a lot, it's pretty cross-browser. if you would need support for ff < 3, you would also need to add display:-moz-inline-stack; under display:inline-block; within .inline-block rule.)
Check this Demo jsFiddle
Set following two things
HTML align attribute value center
CSS margin-left and margin-right properties value set auto
CSS
<style type="text/css">
#setcenter{
margin-left: auto;
margin-right: auto;
// margin: 0px auto; shorthand property
}
</style>
HTML
<div align="center" id="setcenter">
This is some text!
</div>
"If the width and height are really unknown beforehand, then you'll
need to grab Javascript/jQuery to set the margin-left and margin-top
values and live with the fact that client will see the div quickly be
shifted during page load, which might cause a "wtf?" experience."
You could .hide() the div when the DOM is ready, wait for the page to load, set the div margin-left and margin-top values, and .show() the div again.
$(function(){
$("#content").hide();
)};
$(window).bind("load", function() {
$("#content").getDimSetMargins();
$("#content").show();
});