I have a sidebar that has this css:
background:#164272;
position:absolute;
left:0px;
top:70px;
width:250px;
height:100%;
And with jquery im showing a table that by default was hidden and is only shown when clicking an element.
But when i show the element on smaller sized screens it pretty much breaks the 100% height. here's an image
How can i prevent it from breaking the 100%?
Thank you
Try height 100% html and body. % height relative value. So it must need standard height value. in this time html, body is the standard.
And don't forget DOCTYPE declaration.
html, body
{height: 100%;
overflow:hidden;}
#yourDiv{
background:#164272;
position:absolute;
left:0px;
top:70px;
width:250px;
height:100%;
}
http://jsfiddle.net/under_09/4bs4r0y5/
If 100% height of the side bar is what you want at all screen resolution then why not
.sidebar {
top : 0;
bottom:0;
left :0;
}
Full fledged demo here
please note that since your width is defined in PX , is't not exactly going to be resposive , on that note checkout min-width and max-width.
Related
I have a black rectangle I wish to extend the full left to right horizontal viewpoint. Problem is, I have a DIV container (980px) I can't change (long story - basically restriction of the software I'm using).
style="position:fixed; left:0%; width:100%; height:300px"
This works, but I'm left with a fixed rectangle I don't want. Absolute positioning extends to a maximum of 980px (governing DIV container). Any suggestions? JS?
Any information you can provide would be extremely appreciated.
Within your stylesheet you will need to change the parent div ( the 980px div ) to have position: static
#parentDiv{
width:960px;
position:static;
}
#fullWidth{
position:absolute;
width:100%;
height:300px;
background: #000;
left:0;
}
The problem is with my image. The img height is 1500px. That need to scroll down. I want the height to be as the height of the device display, like mobile and computer display.
img{
width:100%;
height:auto;
}
make the height also 100%
img{
width:100%;
height:100%;
}
Put the image in a wrapper with height: 100%;;
add same height: 100%; to the .img tag.
DEMO
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 was curious if there was a way to remove an element from the page flow similar to position:fixed;, such that the page won't scroll.
Example - currently even though it goes beyond the screen it doesn't increase the size of the document, but if position is changed to absolute / relative it will.
I would like for the position to be absolute (although relative will work), yet not increase the document size.
I'm looking for ways to do this be it html/css work around, JavaScript, or jquery (even browser-specific solutions).
Depending what else you have on the page, this might do the trick.
body {
height:100%;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}
If you want other elements to overflow the body, use this code.
<div class="wrapper">
<nav></nav>
</div>
body {
height:100%;
}
.wrapper {
position:absolute;
top:0;
bottom:0;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}
I want to keep my footer at the bottom of the page while keeping there position absolute , the have the following page structure :
<div id="head"> </div> //want to keep its size auto and always on the top (position absolute)
<div id="body"> </div> //the children of #body have position absolute (keep size auto)
<div id="foot"> </div> //want to keep this at the bottom (just below body , if body size
changes then footer will also change (position absolute)
How can i do this?
Edit
I think i was not clear to my question, sorry for that but my actual problem is that in #main ( height : auto ) the contents are absolute so those contents are not included in the height of main ( i am just guessing this ) thats why the height of main was 0 because of this the footer comes up. This is my actual problem.
Use bottom:0:
#foot {
position:absolute; /* your requirement, you can also use fixed though */
bottom:0;
/* your other possible styles */
}
Just keep in mind that for bottom to work, you got to specify the position as you said :)
If you use position:fixed, the footer will still be available on bottom of the page when you scroll but it is up to your requirements.
If i understand correctly you need position:fixed and not absolute..
#head {
position:fixed;
height:30px;
top:0;
left:0;
right:0;
}
#foot{
position:fixed;
height:40px;
bottom:0;
left:0;
right:0;
}
#body{
padding-top:30px; /* the same as the #head height*/
padding-bottom:40px; /* the same as the #foot height*/
}
Demo at http://jsfiddle.net/ZXMTR/