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
Related
I'm going nuts! lol
I'm trying to position one image to the bottom of a page but it only works if the page is on large width...say 1360px, but when I shrink the with exactly to the 1206px and less, the body the image is pushed up creating a padding to the bottom as you can see in the image bellow (The image is represented by the green box).
The green image is positioned using this CSS:
body::after {
content: "";
width: 556px;
height: 767px;
position: absolute;
bottom: 0;
right: 10%;
display: block;
background-image: url("imagens/ghost-dog.png");
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
}
And also there is a transparency (this purplish shadow) I added using other property that don't sticky to the bottom too. Using this CSS:
body::before {
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
And last to make my mind go round and round there is a background to the body but it fits ALL screen as expected:
body {
color: #fff;
font-size: 15px;
line-height: 21px;
font-family: "comfortaa-regular";
background-color: var(--cor-roxa);
background-image: url("imagens/logo-bg.svg");
background-repeat: repeat;
}
html, body {
height: 100%;
}
I've already tried to position body relative, but it didn't solve the issue. I don't know if it matter but I'm using bootstrap and my divs are organized like the image below:
Any suggestions?
Without any example to review this is difficult to determine a cause. That said, what immediately comes to mind is a child element with a margin is overflowing it's parent container pushing the window boundary but not it's parent containers boundary.
I would inspect your elements and toggle any margins to see if this has any effect.
If you add your code to a fiddle I can take a look and update this if I notice the issue.
My requirement is a page with a fixed position header and full border around the page.
Setting this up is simple, but I have a problem with the fixed position header overlapping the page border.
Visually, this shows the problem:
You can see the fixed position header overlaps the border on the right. My aim is to prevent this from happening.
This the relevant block of code I believe - testing this by setting position to relative, for example, will stop the header overlapping the right border, but I need the header to be fixed.
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: 10;
}
Here is a pen to demonstrate the issue in full:
http://codepen.io/juxprose/pen/vERQQr
Any ideas? I've tried some z-index experiments as that appears to be the issue, but no luck. The 100% width also seems related to the issue. Any pointers much appreciated, thanks.
Try changing your css to this:
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: -1;
}
.site-main {
position: relative;
margin: 100px 25px;
z-index:-2;
}
It's working on CodePen - hope it works for you too.
http://codepen.io/juxprose/pen/vERQQr
Please add left and right 10px then it will solve
replace width: 100% with right: 10px and left: 10px
.site-header {
min-height: 100px;
background: blue;
position: fixed;
right: 10px;
left: 10px;
z-index: 10;
}
Example: http://codepen.io/anon/pen/yyKGyJ
Result
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
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.
I'm just getting into HTML and CSS and I have a quick question. Is there any way to make a parent element grow in size to accommodate one of its children? I have the background set on <html>. Then inside the body I have a div which sets a different background color and isn't as wide/tall as the whole page. This leaves a two toned design. Then, I have a nested div containing all the content to be displayed. This all works fine, unless the page content is enough that a scroll bar is necessary. If that happens, both background colors are lost past the original bottom of the screen. This problem is extremely annoying and from what I've read there is no great way to handle it, but I wanted to see if anyone knew. I have the following properties set:
html {
background: [gradient code...]
height: auto;
min-height: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
body {
height: auto;
width: 100%;
position: absolute;
bottom: 0;
top: 0;
margin: 0;
padding: 0;
border: 0;
}
div.background {
background-color: #D0D0D0;
text-align: center;
height: auto;
width: 70%;
position: absolute;
top: 150px;
bottom: 30px;
left: 15%;
margin: 0;
padding: 0;
border-radius: 7px;
}
div.container {
height: auto;
width: 70%;
position: absolute;
left: 15%;
bottom: 0;
top: 0;
}
Where div.background has the second background color and div.container has the content displayed on the page.
Thanks for your help.
How about not using position: absolute? Remove that (and the associated top, left, bottom...) and replace them with correct margins instead.
I believe if you specify size (width, height) auto on the parent (or just leave it without specifying size) it grows/shrinks to fit the children's size (it doesn't work recursively, so you may want to go up to the last parent in the tree). Avoiding absolute positioning (http://www.w3schools.com/Css/css_positioning.asp) could also do the trick, and float element or a different z-index could probably do the workaround too, but overgrowing the parent, I think...
If you get rid of the width and position absolute div.background and change position absolute to relative for div.container you should be good