I wanted to have a full width background with my bottom div without changing the page layout structure. The following code allowed me to have a full background color (dark purple) just as I wanted it here. But when I checked the page on my phone, I saw that the bottom went up to 9999px. If I put overflow: hidden, then I dont get the full width background. Please help, thank you!!
.nextpage {
color: #FFF;
background: #2D0072;
width: 100%;
height: 120px;
text-align: center;
padding: 33px 5px;
display: block;
position: relative;
}
.nextpage:before, .nextpage:after {
content: "";
position: absolute;
background-color: #2D0072;
top: 0;
bottom: 0;
width: 9999px;
}
.nextpage:before {
right: 100%;
}
.nextpage:after {
left: 100%;
}
Of course, the best way to tackle this would be to arrange your layout HTML...
<body>
<header>
<div class="page-width">
// header stuff here
</div>
</header>
<content>
<div class="page-width">
// main content stuff here
</div>
</content>
<footer>
<div class="page-width">
// footer stuff here
</div>
</footer>
</body>
Then the CSS...
body {
display: flex;
}
content {
flex: 1;
}
.page-width {
margin: 0 auto; // centers your block element if smaller that it's parent
max-width: 1200px; // you decide
}
But you can't alter your layout?? You will have to do some hackery...
CSS
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
stuff-in-footer {
margin: 0 auto; // for centering
max-width: 1200px; // you decide
}
The hackery needed is to put a bottom margin on the rest of your page so you can see it when fully scrolled. Also, 'fixed' will position the footer on the bottom of the page, as the CSS is written above, no matter the scroll position of your page. Some JS might be needed to apply the right bottom margin on your content based on the display height of your footer, and more to reveal the footer when the page is fully scrolled.
Check your media queries. Loading the page in a desktop browser and scaling the width of the window down vs loading the page on mobile on BrowserStack generates very different results.
I want to divide the homepage into three responsive main sections horizontally: a header, a body and a footer, and then divide the body part into three responsive and equal vertical sections.
Please suggest a way to do so
Divide sections horizontally
There are many ways to do that, and by default most HTML tags are stacked horizontally of top each other, but to fix a header on top of everything and and a footer below everything, without leaving the page even when scrolling you need to use the position: fixed rule with the top, left, bottom and right values adjusted to your design's needs. In the example below we stick the div with class header to the top of the screen, by setting the top: 0, and make it span the full width by specifying the left: 0; and right: 0; properties, the same goes for the .footer but it is sticking to the bottom instead using bottom: 0;. Then we have the div with class body to contain the rest of your page, we need to give it a margin-top equal to the .header's height in order to prevent hiding content below the .header, the same goes for margin-bottom and the .footer's height.
Divide the body vertically (responsively)
This is achieved easily by giving the width of elements using percentages, so if you need to divide the .body div into three columns, each should span the third (33.33%), and that is achieved by setting the width: 33.333%. Now to show inner divs on the same line you need to set the display property to inline (or other inline values) and make sure the margin is zero because it is not counted in the width property.
Of course there are many alternatives to do that, but this is an example on how to do it:
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: #4286f4;
text-align: center;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: black;
color: white;
text-align: center;
}
.body {
background: green;
margin: 70px 0;
padding: 0;
width: 100%;
text-align: center;
}
.body_v1, .body_v2, .body_v3 {
height: 100px;
width: 33.333%;
border: 0;
display: inline-block;
margin: 0;
float: left;
padding: 0;
text-align: center;
}
.body_v1 {
background: #42f465;
}
.body_v2 {
background: #108928;
}
.body_v3 {
background: #034210;
}
<div class="header">header</div>
<div class="body">
<div class="body_v1">a</div>
<div class="body_v2">b</div>
<div class="body_v3">c</div>
</div>
<div class="footer">footer</div>
After all, my advice is that you use a third party framework to achieve this instead of reinventing the wheel, there are many examples out there you can have a look and choose the one that more suits you.
I have a navigation menu on my site which will transition to a full-screen slide-out menu whenever the user uses the site on a mobile device via media queries. However if the screen height is vertically too small to display the contents of the menu (e.g. wearables) I'd like the menu to have its own scrollbar.
Problem: The menu fits itself to the screen with a fixed position that is 0 pixels from all sides. However, even if I have a minimum height and an overflow: visible|auto property assigned to the menu, it still never shows its own scrollbar. Only the body one shows.
Example: http://jsfiddle.net/spryno724/fbhh15fo/ Try resizing the frame of the preview area to see what I mean.
Question: Anyone know how to get the menu to show its own scrollbar, if the screen height is too small. Again this menu has a fixed position which is 0 pixels from all sides.
This will make the menu max out at the viewport height.
Add
max-height: 100vh;
to the ul css section
ul {
/* Lots of declarations */
max-height: 100vh;
}
(Demo)
You need to change min-height to max-height in ul :
Before Change:
ul {
background: #191919;
bottom: 0;
color: #EDEDED;
left: 0;
margin: 0;
**min-height: 150px;**
padding: 0;
position: fixed;
overflow: auto;
right: 0;
top: 0;
}
After Change :
ul {
background: #191919;
bottom: 0;
color: #EDEDED;
left: 0;
margin: 0;
**max-height: 150px;**
padding: 0;
position: fixed;
overflow: auto;
right: 0;
top: 0;
}
JSFIDDLE DEMO
It turns out that by adding a media query, and specifying the height of the menu to 100% worked!
#media screen and (max-height: 380px) {
ul.nav {
min-height: 100%;
overflow: auto;
}
}
I am a novice at CSS/HTML and need help with a certain issue. I am trying to make my opening div (w/ background image) cover the entire screen (which I have done successfully). The problem is, no matter what I try, I cannot get the next div to start after the initial div. I am including my HTML and CSS. Problem is that I cannot cause #map-contain to start after #opening. Thought it would simply be 'positioning' issue but I cannot solve this. Please help. http://jsfiddle.net/nELQF/ - (need black div to start at bottom of red div)
HTML
<div id="opening">
</div>
<div id="map-section">
</div>
CSS
html, body {
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
}
#opening {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid orange;
background-image: url('DSC_0577.JPG');
background-position: center;
background-size: cover;
}
#map-section {
width: 100%;
height: 800px;
background-color: black;
}
Given that the top element is absolutely positioned, you could do the same with the second element and set top:100% in order prevent the elements from overlapping.
Updated Example
#map-section {
width: 100%;
position: absolute;
height: 800px;
top: 100%;
background-color: black;
}
As an alternative, an arguably better approach allowing you to avoid having to absolutely position both elements would be to simply set a height of 100% on the html/body elements.
Example Here
I have the following html...
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
And following css...
.header{
position: fixed;
background-color: #f00;
height: 100px;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;}
But why the header and footer is not fixed, anything I did wrong? I want only "main" to be scrollable and "header" and "footer" to be at a fixed position. How to do?
+-------------------------------------+
| header | -> at fixed position (top of window)
+-------------------------------------+
| main |
| |
| | -> scrollable as its contents
| | scroll bar is window scroll bar not of main
| |
| |
+-------------------------------------+
| footer | -> at fixed position (bottom of window)
+-------------------------------------+
See this fiddle
My issue was that a parent element had transform: scale(1); this apparently makes it impossible for any element to be fixed inside it. By removing that everything works normally...
It seems to be like this in all browsers I tested (Chrome, Safari) so don't know if it comes from some strange web standard.
(It's a popup that goes from scale(0) to scale(1))
if a parent container contains transform this could happen. try commenting them
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
you need to give width explicitly to header and footer
width: 100%;
Working fiddle
If you want the middle section not to be hidden then give position: absolute;width: 100%; and set top and bottom properties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.
Double-check that you haven't enabled backface-visibility on any of the containing elements, as that will wreck position: fixed. For me, I was using a CSS3 animation library...
Working jsFiddle Demo
When you are working with fixed or absolute values,
it's good idea to set top or bottom and left or right (or combination of them) properties.
Also don't set the height of main element (let browser set the height of it with setting top and bottom properties).
.header{
position: fixed;
background-color: #f00;
height: 100px;
top: 0;
left: 0;
right: 0;
}
.main{
background-color: #ff0;
position: fixed;
bottom: 120px;
left: 0;
right: 0;
top: 100px;
overflow: auto;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
bottom: 0;
left: 0;
right: 0;
}
I had a similar problem caused by the addition of a CSS value for perspective in the body CSS
body { perspective: 1200px; }
Killed
#mainNav { position: fixed; }
As others pointed out, certain CSS properties on a parent element will prevent position: fixed from working. In my case it was backdrop-filter.
This might be an old topic but in my case it was the layout value of css contain property of the parent element that was causing the issue. I am using a framework for hybrid mobile that use this contain property in most of their component.
For example:
.parentEl {
contain: size style layout;
}
.parentEl .childEl {
position: fixed;
top: 0;
left: 0;
}
Just remove the layout value of contain property and the fixed content should work!
.parentEl {
contain: size style;
}
Another cause could be a parent container that contains the CSS animation property. That's what it was for me.
For anyone having this issue primarily with navbars, not sticking to the top, I found that if any element in the parent container of the positon: fixed; element has a width exceeding 100% - so creating horizontal scrollbars - is the issue.
To solve it set the 'parent element' to have overflow-x: hidden;
You forgot to add the width of the two divs.
.header {
position: fixed;
top:0;
background-color: #f00;
height: 100px; width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px; width:100%;
}
demo
You didn't add any width or content to the elements. Also you should set padding top and bottom to your main element so the content is not hidden behind the header/footer. You can remove the height as well and let the browser decide based on the content.
http://jsfiddle.net/BrmGr/12/
.header{
position: fixed;
background-color: #f00;
height: 100px;
width:100%;
}
.main{
background-color: #ff0;
padding-top: 100px;
padding-bottom: 120px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
width:100%;}
You have no width set and there is not content in the divs is one issue. The other is that the way html works... when all three of fixed, is that the hierarchy goes from bottom to top... so the content is on top of the header since they are both fixed... so in this case you need to declare a z-index on the header... but I wouldn't do that... leave that one relative so it can scroll normally.
Go mobile first on this... FIDDLE HERE
HTML
<header class="global-header">HEADER</header>
<section class="main-content">CONTENT</section>
<footer class="global-footer">FOOTER</footer>
CSS
html, body {
padding: 0; margin: 0;
height: 100%;
}
.global-header {
width: 100%;
float: left;
min-height: 5em;
background-color: red;
}
.main-content {
width: 100%;
float: left;
height: 50em;
background-color: yellow;
}
.global-footer {
width: 100%;
float: left;
min-height: 5em;
background-color: lightblue;
}
#media (min-width: 30em) {
.global-header {
position: fixed;
top: 0;
left: 0;
}
.main-content {
height: 100%;
margin-top: 5em; /* to offset header */
}
.global-footer {
position: fixed;
bottom: 0;
left: 0;
}
} /* ================== */
I had the same issue, my parent was set to transform-style: preserve-3d; removing it did the trick for me.
We'll never convince people to leave IE6 if we keep striving to deliver quality websites to those users.
Only IE7+ understood "position: fixed".
https://developer.mozilla.org/en-US/docs/Web/CSS/position
So you're out of luck for IE6. To get the footer semi-sticky try this:
.main {
min-height: 100%;
margin-bottom: -60px;
}
.footer {
height: 60px;
}
You could also use an iFrame maybe.
This will keep the footer from 'lifting off' from the bottom of the page. If you have more than one page of content then it will push down out of site.
On a philosophical note, I'd rather point IE6 users to http://browsehappy.com/ and spend the time I save hacking for IE6 on something else.
You can use it in the same way because if the parent container has the transform effect, you could create a child where it occupies 100% of the parent container and add a position realtive and then the container that you want to add the position fixed and it works without problems.
might be an answer for some cases https://stackoverflow.com/a/75284271/7874122
TLDR position: fixed is attached to containing element, by which element is positioned. if containing block is different than viewport dimensions, fixed element will be placed according to containing block.