Despite doing:
top: 0%;
margin-top: 0%;
padding-top: 0%;
there's still a gap between the top of the header in #txt and #outer - why?
It looks like it's because the <h1> text has a default margin that I can't override?
JS FIDDLE
Because you have a height of 90% which makes the object not as high as the parent and is therefore unable to reach the bottom.
Changing the height to 100% will fix the problem.
Edit:
If you want to move the space from the bottom of the div to the top you have to change top: 0% to top: 10%.
You just need to add this to your CSS
#txt h1 {
margin-top: 0;
}
You had set a fixed height for #txt, from what i understood, this is what you're looking for?
https://jsfiddle.net/dryy2j31/5/
#txt {
position: absolute;
background-color: green;
top: 0%;
margin-top: 0%;
padding-top: 0%;
width: 100%;
height: auto;
}
In your fiddle you are applying the margin:0%; to the #txt div, so no rules are being applied to the <h1>. You just need to add #txt h1 { margin: 0; see below.
var outer = document.createElement("div");
outer.id = "outer";
var txt = document.createElement("div");
txt.id = "txt";
txt.innerHTML = "<h1>Enter your email</h1> <p>We need your email to do stuff.</p>";
outer.appendChild(txt);
document.body.appendChild(outer);
#outer {
background-color: yellow;
width: 530px;
height: 300px;
position: absolute;
left: 0%;
right: 0%;
top: 9.05%;
margin: 0 auto;
}
#txt {
position: absolute;
background-color: green;
top: 0%;
margin-top: 0%;
padding-top: 0%;
width: 100%;
height: 100%;
}
#txt h1 {
margin: 0;
}
Related
I need to make a floating div that appears to be almost hidden and if I click in the tab it appears to the left. Floating over the rest of the site. I don't know if I made myself clear, so I put here two images, how it should look hidden and visible. But I couldn't figure it out yet how to make it. Any help will be appreciated.
I work with VueJS.
This is a vanilla js implementation that uses fixed position, the css transition property for animation, and a class that is toggled when the handle is clicked to change the position.
const slideout = document.querySelector('.slideout')
const handle = slideout.querySelector('.handle')
handle.onclick = function() {
slideout.classList.toggle('active');
}
.slideout {
position: fixed;
width: 80%;
height: 80%;
left: 100%;
top: 10%;
transition: left .3s ease-out;
}
.slideout.active {
left: 10%;
}
.handle {
position: absolute;
top: 10px;
left: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
background: darkred;
cursor: pointer;
}
.body {
position: absolute;
background: red;
width: 100%;
height: 100%;
border-radius: 8px;
}
<div class="slideout">
<div class="handle"></div>
<div class="body"></div>
</div>
I'm trying to make a navigation bar that overlap my header and stick to the top of the window on scroll.
It will start at top: 45px and stick at top: 0 on scroll.
My first approach was to set it at position: fixed; top: 45px and change the value with JS on a scroll event. But Firefox gave me the warning about "asynchronous panning" discussed on this post.
I have been able to do it with a bit of CSS trickery, but I am wondering if there is a simpler CSS way or a valid JS approach to do this (not throwing a warning).
body {
position: relative;
height: 100%;
width: 100%;
background-color: grey;
overflow-x: hidden;
margin: 0;
}
.container {
position: absolute;
top: 0;
left: -1px;
width: 1px;
bottom: 0;
padding-top: 45px;
overflow: visible;
}
nav {
position: sticky;
top: 0;
transform: translateX(-50%);
margin-left: 50vw;
width: 300px;
height: 70px;
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
width: 100%;
background-color: green;
}
<div class="container">
<nav></nav>
</div>
<header>
</header>
<main>
</main>
You can simplify your code and avoid using an extra container:
body {
background-color: grey;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 70px;
margin:45px auto -115px; /* 115 = height + margin-top */
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
background-color: green;
}
<nav></nav>
<header>
</header>
<main>
</main>
Is there a way to set a global margin to a page which will include absolutely and fixed positioned elements as well?
This is possible is you wrap these absolute / fixed elements with an element which has transforms set on them.
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
body {
margin: 100px;
color: white;
transform: translateX(0);
border-top: 2px solid green;
}
.absolute, .fixed {
width: 100px;
height: 100px;
top: 0;
}
.absolute {
position: absolute;
background-color: red;
left: 0;
}
.fixed {
position: fixed;
background-color: blue;
right: 0;
}
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
Notice that, in the above snippet, both the absolute and the fixed element are positioned relative to the body with the margin.
Note:
1) I don't necessarily recommend using it this way as it will most probably cause confusion in the long run.
2) As #Temani Afif pointed out fixed elements will behave like absolute elements this way - so this technique may not work as expected depending on the context.
You can add margin to all elements with the wildcard selector, but then you'll spend a lot of time cancelling this out on internal elements. You can try something like body > * to add margin to top level elements.
body > * {
margin: 50px;
}
#abs {
position: absolute;
top: 0;
left: 0;
background: red;
width: 100px;
height: 100px;
}
#abs .inner {
position: absolute;
top: 0;
left: 0;
background: blue;
width: 50px;
height: 50px;
}
#fixed {
position: fixed;
bottom: 0;
right: 0;
background: green;
width: 100px;
height: 100px;
}
<div id="fixed"></div>
<div id="abs">
<div class="inner"></div>
<div>
Could somebody please assist. I am trying get an image to have a max-height and an auto width. The problem is these rules are being ignored as it's parent is fixed
DEMO http://jsfiddle.net/gop4jhm9/5/
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
max-height: 100%;
background: red;
display: inline-block;
padding: 10px;
max-height: 30%;
}
#myDiv img {
width: auto;
height: 100%; // being ignored
}
Is there any way of doing this via CSS, JS, jquery ?
The problem is that you have the #myDiv with two max-height attributes. Take away the second one, which restricts the div to 30%, and it will work in fixed.
That is because it intends to keep the image's aspect ratio because you set the margin to auto. if you wish for a max height to be set, set it in the max-height property of the #myDiv.img.
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
background: red;
display: inline-block;
padding: 10px;
}
#myDiv.img
{
width: auto;
max-height:90%;
}
I have a popup window in which an element called fade is supposed to extend to the full width of the screen (it does this when there is no scrollable content). However when content exceeds 100% of the browser window it does not extend to 100% of the page height.
If i set html, body { height: 100%; overflow-y: hidden; } I get the result I want but then I get 2 scrollbars on the right hand side.
http://jsfiddle.net/Dpqg5/
HTML
<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>
CSS
#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }
Any ideas on how to get this element to extend fully to the height of the web browser even when there is more scrollable content?
set your fade css to:
#fade {
display: none;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}