This question already has answers here:
How to make a DIV always float on the screen in top right corner?
(2 answers)
Closed 4 years ago.
I have a need to make a hidden div element shown in an user event, in the visible top.
What I mean by visible top is,
- Its 0 if page is not scrolled
- if page is scrolled then I need coordinate of visible top, not the page top
Can that be set static with CSS or how to calculate it with jQuery or pure js.
Best Regards
You can do it with just plain css:
div {
position: fixed;
top: 0;
display: none;
}
This will always be on top: 0 regardless of whether it is scrolled or not.
Related
This question already has an answer here:
What is the point of CSS collapsing margins?
(1 answer)
Closed last year.
I have an element with a margin at the bottom of 10px. And immediately under this element, I place another element with margin at the top of 10px.
Now there is exactly 20px of whitespace between these 2 elements.
What could be the cause of this behavior?
Maybe you're giving some default margin in the body section.
So you can try saving this using:
body{
margin:0
}
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What is the point of CSS collapsing margins?
(1 answer)
How to disable margin-collapsing?
(12 answers)
Closed 3 years ago.
I've never read anything to suggest that the overflow property of an element would have the strange effect on element positioning that I'm seeing here:
https://codepen.io/kshetline/pen/ZEzLVxN
Toggle the toggle button in the example, and watch how somehow the background of a <div> mysteriously slides upward, covering previous content, while its contents stays in the same screen-relative place (meaning the content is moving lower relative to its parent's background).
The example is a very simplified version of something I'm trying to do with an Angular component that's meant to scale its <ng-content> — but the example is only CSS and HTML with a tiny touch of JavaScript, no Angular, since I'm trying to isolate the relevant variables.
The content of an HTML element can be scaled down using transform: scale( less-than-1 scaling factor ), but even though the content of the element is rendered smaller, by default the element's pixel dimensions remain the same, with the content (unless otherwise specified) shrinking toward the center of the element, and blank space left around that content that leaves the element at its original unscaled dimensions..
You need to compute negative margins that match the degree of scaling in order for the element itself to be considered smaller. I've done that, but I've found that unless the container for the scaled element has CSS overflow set to hidden, some weird positioning can occur, as if the extra blank space required that's supposed to be removed by the negative margins is still having some partial, hard-to-explain effect on the overall layout of other elements.
I'm seeing this behavior in Chrome, Firefox, Safari and Edge -- so I'm guessing it's "proper" CSS behavior, but it makes no sense to me, and I'm hoping someone can explain what's going on. I'd like to be able to keep overflow set to visible so that scaled content can still do things like show floating dropdown menus that don't get clipped at the boundaries of the element.
let hidden = true;
const inner = document.getElementById('inner')
function toggleOverflow() {
hidden = !hidden;
inner.style.overflow = hidden ? 'hidden' :
'visible'
}
html, body {
height: calc(100vh - 10em);
}
.page {
font: 32px Arial, Helvetica, sans-serif;
height: calc(100% - 1em);
}
.container {
background-color: #ACF;
height: 100%;
}
.outer-wrapper {
background-color: rgba(187, 255, 204, 0.5);
font-size: 2em;
margin: 0 1em;
position: relative;
}
.inner-wrapper {
overflow: hidden;
position: relative;
width: fit-content;
}
.ng-content {
margin: -18.75px 0;
transform: scale(0.5);
}
.container-text {
display: inline-block;
position: absolute;
bottom: 1em;
}
<div class="page">
<button onclick="toggleOverflow()">Toggle Overflow</button><br>
Content outside of the<br>
panel being scaled and its<br>
containing <div>, 32pt font<br>
<div class="container">
<!--Angular component start tag goes here -->
<div class="outer-wrapper">
<div id="inner" class="inner-wrapper">
<div class="ng-content">
50% scaled content goes here, 64pt font
</div>
</div>
</div>
<!-- Angular component end tag goes here -->
<span class="container-text">This is an absolutely positioned <span> in the same <div></span>
</div>
</div>
From CSS 2.2 spec
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
So adding overflow:hidden is stopping the margins from collapsing.
You have set a negative margin in your .ng-content. If overflow is set to hidden, it will hide the negative margin. Set the margin to a positive number and it will fix this jumping issue.
.ng-content { margin: 18.75px 0; }
If you are trying to change the height of the element up and down, try using max-height with overflow: hidden. When max height is set to 0, it will be hidden. When set to something like 500px, your content will show!
Follow-up...
I created a variant on my first code pen here:
https://codepen.io/kshetline/pen/WNeRmOo
In this case, I'm using transform-origin: top center when I scale, and putting all of the needed negative margin on at the bottom of the scaled element, rather than splitting it evenly between top and bottom. That eliminates the weird vertical position shifting.
overflow: hidden is still needed to hide the excess of background color from "leaking out" of its container, but in the (common) case where the background of the scaled element is transparent, there would be no visible effect from using overflow: visible instead, and no worries about clipped dropdown menus originating inside the scaled element.
Follow-up #2...
Here's the best solution, using padding: 0.05px to deal with the real issue that #Alochi helped me understand — stopping border collapse:
https://codepen.io/kshetline/pen/zYONgzV
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
I was trying to make sticky footer for my website, i have used javascript to create element in this case for specific reason, i created <footer> element and tried to get it fully at bottom at every resolution of width.
I want to append footer at body only, so this is my javascript:
$(function () {
$('.products').each(function(i, obj) {
if (i > 0) {
obj.id = "p" + i
var pl = document.createElement("footer");
var t = document.createTextNode(i);
pl.className = "pageblock"
pl.appendChild(t);
document.body.appendChild(pl);
}
});
});
This creates footer, in this case single footer only, and editing style of .pageblock class works.
To bring footer fully down, i have tried this:
.pageblock {
clear: both;
position: relative;
text-align: center;
bottom: 0;
z-index: 10;
font-family: 'Lato';
font-size: 3em;
color: white;
font-weight: bold;
}
but for some reason, it still wouldn't work, it would be stuck in somewhere nearby vertical center. Check for "1" here.
I have flex layout on website, so elements horizontally scale with browsers with and increase vertical size.
Is there any way i can fully move element to the bottom so it's always there, even when vertical size get's bigger or smaller? Is there any way i can do this without wrapping everything up in single div which may damage the code itself?
Thanks!
It's quite difficult to tell exactly what you need without your flex setup and the html, but on a hunch, you probably need
html, body {
min-height: 100%;
}
if your application allows. Your flex elements are stretching vertically to the height of the body, which is the height of the content, therefore your footer is already at the bottom. By setting the minimum height to 100% you set html and body to the window height, thus stretching the elements properly and throwing your footer to the bottom.
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 9 years ago.
I'm looking for a solution where I have a div that grows dynamically depending on the content while maintaining a 1:1 aspect ratio. I've found many solutions where the size of the box is relative to the pages width rather than its content (like this). IE8 compatibility would be a big plus!
A JavaScript solution would work too, but I'd prefer a CSS solution.
Thanks a bunch!
So the answer to your question(s) is/ are:
I have a div that grows dynamically depending on the content
Use 'float' (shrink-to-fit) or 'display: inline-block' for the (containing) DIV element.
while maintaining a 1:1 aspect ratio
To achieve this you can use 'padding-top' or 'padding-bottom' with a percentage value representing the desired aspect ratio (in case of 1:1 it will be 100%) on a 'dummy' element, which will be a child of the containing DIV. The second child then will be absolute positioned (remember to relative position the containing DIV).
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
And if the height is actually heigher than the height set by the width, you additionally need
overflow: auto;
max-height: 100%;
for your element.
That's it - DEMO
You can set the element to have a 1x1 ratio using a function like:
function set_1x1_ratio(el){
//set auto size
el.width('');
el.height('');
var max = Math.max(el.width(), el.height());
el.width(max);
el.height(max);
}
And call that whenever you dynamic adding happens. Like this.
Alternatively you could use a mutation observer to call it whenever the element changes. Like this.
This question already has answers here:
Hiding the scroll bar on an HTML page
(22 answers)
Closed 9 years ago.
Is it possible to hide the browser's horizontal and vertical scroll through HTML or Javascript?
I have a listing and for that I have made my own div to div scroller and I want to hide the browser's scroll bars
Thanks in advance
You can apply overflow: hidden to html and/or body in CSS but then, of course, you have to be careful so that your <div> doesn't expand past the browser window.
Example:
html, body
{
overflow: hidden;
}
Set the body tag to overflow: hidden;.
You should be able to set the css for the div to hide the scrollbar. Put everything into a main div and set the css for the main div to this:
height: 100%;
width: 100%;
overflow:hidden;
then use your own scrollbars on the content div.