I have a position fixed menu that is right inside my body, and is toggled hidden and shown via a button on the page the user can click. The problem I am having is this menu can get decently big (it pulls dynamic content via server) and sometimes it will be longer than the body, however when it spills over the bottom of the page, the page does not expand to scroll for it (it gets cut off).
I tried
body{
overflow-y: scroll;
}
which did not seem to effect it. Here is the css(sass) of the item itself.
.globalMenu
position: fixed
top: 75px
left: 50%
width: 350px
margin-left: -175px
height: auto
padding: 5px
z-index: 1001
background-color: #28282e
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
#media screen and (max-width: 600px)
width: 100%
margin-left: 0
left: 0
So I'm not sure what I'm missing here - something about how fixed works maybe? Thanks for reading!
Fixed items are taken out of the document flow, so even if its dimensions exceed those of the viewport, the containing element (be it <body> or any other descendants) will not accommodate it with scrollbars.
To put it in another way, the <body> element would have no access to the dimensions of the position: fixed element, and therefore assigning overflow property on the body will not have any effect of allowing users to access hidden content of said element.
Instead, assign the overflow-y: auto property to the fixed element instead:
.globalMenu
overflow-y: auto;
position: fixed
top: 75px
left: 50%
width: 350px
margin-left: -175px
height: auto
padding: 5px
z-index: 1001
background-color: #28282e
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
#media screen and (max-width: 600px)
width: 100%
margin-left: 0
left: 0
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/38bsqLsb/1/
Related
I am new to HTML/CSS and curious why div stretch correctly in below example, but not image?
Is the image calculated differently than div?
Is there an MDN documentation i can read more about this behavior?
body {
background: #222;
padding: 32px;
}
.card {
background-color: white;
padding: 32px;
border-radius: 8px;
}
img {
width: auto;
margin: 0px -32px 0px -32px;
}
.gooddiv {
width: auto;
height: 100px;
margin: 0px -32px 0px -32px;
border: 2px solid red
}
<div class="card">
<img alt="SG Image" src="https://images.unsplash.com/photo-1508964942454-1a56651d54ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" />
<div class="gooddiv"></div>
</div>
For a <div>, a width: auto setting will mean 100% of its parent element, so it will stretch.
For an image, width: auto (which is also the default if you don't define width at all) will mean that (unless there is a height setting) the image is displayed at its original size and therefore not stretch or shrink. If you define width: 100% or similar (or a height setting) , it will adjust.
I want to add that if an image is stretched beyond its original proportions, it will look distorted and have a bad quality, so it really wouldn't make sense to stretch an image by default to the size of its parent element, which might easily be larger than the image itself.
To avoid the mentioned distortion due to stretching beyond original size, a common way to handle that is to use max-width: 100%; (and also max-height: 100% if you defined height for the parent), thereby leaving width and height at their default auto (= original size). That way you'll stretch the image to full width if its at least as wide as the parent originally, or have it displayed at original size if its smaller (avoiding bad quality due to stretching beyond original size). In the snippet below, I only used max-width: 100%; (i.e. everything else at default settings), which limits the image width to the parent element width (minus padding), avoids stretching beyond original width and adjusts the height automatically, keeping the original height/width ratio. (BTW. I erased the negative margins you added, which wouldn't make sense in this context)
Note: Setting width: 100% and height: 100% is not a good idea for images since in most cases this will distort the height/width proportion of the picture, making it look bad (unless it's an abstract graphic pattern where a disproportion between height and width doesn't matter).
body {
background: #222;
padding: 32px;
}
.card {
background-color: white;
padding: 32px;
border-radius: 8px;
}
img {
max-width: 100%;
margin: 0;
}
.gooddiv {
width: auto;
height: 100px;
margin: 0px -32px 0px -32px;
border: 2px solid red
}
<div class="card">
<img alt="SG Image" src="https://images.unsplash.com/photo-1508964942454-1a56651d54ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" />
<div class="gooddiv"></div>
</div>
i'm trying to get my onepager to work. But sadly i have bug with my css.
If i try to scale the width of my browser below the width of my content a scrollbar appears. When i use the scrollbar and scroll to the right, i see my background color does not resize to the actually width. I don't want my website to be responsive or don't want to use any mediaqueries. Just basic stuff with a bug ;)
I took a screenshot to show what i mean:
Here is my website: Website
Just to make sure everyone understand HOW i mean the scrollingpart:
Remove your fix width properties e.g
style.css: 144
#header {
height: 95px;
/* width: 1200px; */ //Use percentages and media query to control width
margin: auto;
}
.section-wrapper {
width: 1200px; //Here use media queries and better to use % instead of px
padding: 50px;
margin: auto;
}
section#one>.section-wrapper:after {
content: url(img/leaf.png);
/* height: 152px; */
/* width: 331px; */
display: block;
/* position: absolute; */
margin: -57px 0 0 700px; // Do not use margin 700px instead position it on right and add right padding or distance.
}
after setting width to 100% in .section-wrapper the text stop clipping
Edit #2:
By removing the padding: 50px; from .section-wrapper in #one section and leaf part i got this result
I'm working on a school assignment where I'm getting weather data and displaying the output, in the background I wanted some clouds moving around.
I coded the cloud movement with a CSS3 key frame, my problem is that the clouds always stay on the top even though the element I want on top have an higher z-index.
I was able to get it working correctly setting .forecast to position: absolute; but that element should stay in the middle of the screen and therefore I cant use absolute on that one.
The site: beta2.sampettersson.com.
Try position: relative; for the .forecast div
.forecast {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px 5px 5px 5px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
max-width: 300px;
padding: 2%;
position: relative;
width: 80%;
z-index: 3;
}
If you just move the #clouds div to higher in the source order (i.e. before the forecast div) it will automatically fall behind the forecast div.
On http://www.posterlion.com/ the left side disappears when you make the window smaller by the browser. The horizontal scrollbar appears though but I can't get to it anymore by scrolling to the left. The content is centered through a absolute div. How do i prevent this from happening?
position:relative;left:50%;margin-left:-517px;
width:1015px; overflow:visible; background-color: #FFFFFF; padding: 10px;
The best practice to centered tour layout is using margin: 0px auto instead of absolute positioning.
In your case you should remove your absolute positioning, create some div which contain all your layout (<div id='wrapper'></div> can be standard in this case) and set its margin to auto.
By:
#wrapper {
margin: 0px auto;
width: yourWidth;
}
In your given CSS add
min-width: 1050px;
Here is Css to update :-
#lwe {
width: 1015px;
overflow: visible;
background-color: #FFFFFF;
padding: 10px;
margin: 0 auto;
}
I have a div(InnerDiv) which contains a grid with paging enabled...
After some user actions , data inside that grid will load and we will have a big grid!
The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.
my css of body and html like below :
html, body
{
margin: 0; /* get rid of default spacing on the edges */
padding: 0; /* get rid of default spacing on the edges */
border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
height: 100%; /* fill the height of the browser */
border:3px solid red;
}
i need 100% height of body when page loads...
OuterDiv inside body like below :
div#OuterDiv
{
position:absolute;
width: 100%;
height: 100%;
/*height: auto;*/
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:5px solid green;
}
InnerDiv Inside OuterDiv Is Like Below :
div#InnerDiv
{
position: relative;
width: 100px;
height: 100%;
margin: 0 auto;
background: transparent url('../Images/Blue.png') repeat scroll left top;
}
Content Inside InnerDiv Like Below :
#Content
{
position: relative;
top: 10px;
background: transparent url('../Images/Red.png') repeat scroll left top;
width: 550px;
height: 1080px; /*>>>>>>>>>>>>>>>>>>> plz see this line*/
top: 10px;
right: 10px;
padding: 7px;
border: 10px ridge #ce004e;
color: black;
}
that grid(Content) is inside InnerDiv...
EDIT 1
the below example can show my situation :
Here's an example at jsFiddle
we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -> outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -> it is only 200px at page load and dynamically it will change to 1080px!
i want to force yellow area (InnerDiv) to fill entire Purple Area...
also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...
i know this problem is about 100% height / but how can i fix that ?
EDIT 2 :
AT LAST HERE IS MY WEB SITE :
MY WEB SITE
plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.
but at page load i want body and OuterDiv And InnerDiv 100% height.
how can i do that?
thanks in advance
You need less constraints on #OuterDiv. By specifying top, bottom, left, and right, you're locking the edges of #OuterDiv to the edges of body; and your body rule locks body to the same size as the viewport.
Try changing your div#OuterDiv rule like this:
div#OuterDiv
{
position:absolute;
margin: 0px;
padding: 0px;
border: 5px solid green;
}
Here's an example at jsFiddle
From what I could gather from your explanation and styles you basically want this:
http://jsfiddle.net/sg3s/zXSXx/
If this is correct I will also explain what is happening to each div. Else please tell me what div is behaving not as you would like and why.
By the way if possible use absolute paths (whole links) to images. Seeing how they need to fit together will help us all to find something that works for you.