I am currently trying to make my .modal class's black background span the whole document length and width (not just the whole viewport, which it is currently doing). It would also be great to make it so you couldn't scroll the document anymore until you interacted with it.
I have verified that its parent container would be body, which I believe should be at least 600px due to my containers having a minimum height of 300px each and them being stacked on top of each other. I have used both 100% width and 100% height and absolutely positioned my element but have had no luck with it covering anything past the bottom of the viewport. I used z-index to ensure it was sitting on top of the other elements in the page and nothing seems to work.
<body>
<main class="todo">
<section class="todo__ctn todo__ctn--lists">
<span>Hello man...lists</span>
</section>
<section class="todo__ctn todo__ctn--tasks">
<span>Hello man...tasks</span>
</section>
</main>
<div class="modal">
<div class="modal__content">
<p>Hello Man...content</p>
</div>
</div>
</body>
````````````````
/* SCSS Styling */
* {
box-sizing: border-box;
}
.todo {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
border: 1px solid black;
&__ctn {
min-height: 300px;
&:first-child {
border-bottom: 1px solid black;
}
}
&__ctn--lists {
background: gold;
}
&__ctn--tasks {
background: tan;
}
}
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0,0,0,.8);
color: orange;
&__content {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
}
}
Like I had mentioned, I would like to have the black background persist, even when you scroll down the page. Once I scroll past the bottom of the viewport, the black background seems to stop and I don't know why.
Related
I have create a bottom div that is present all the time when scrolling the site. Its "natural" stop is right after the footer. When I do scroll, and it's not at the footer, it is a bit transparent. However, what I would like to do is when the sticky div reaches the bottom (i.e. its "true" position), then the background changes or something like that.
Is that possible WITHOUT using JS or something like that ?
Updated with a fiddle:
https://jsfiddle.net/octvg6mn/
HTML:
<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>
CSS:
.largeDiv {
height: 1500px;
width: 100%;
background: #cccccc;
}
.stickyDiv {
position: sticky;
bottom: 0px;
text-align: center;
background: blue;
color: white;
opacity: 0.8;
padding: 25px;
}
.stickyDiv:hover {
opacity: 1.0;
}
So as you can see in the fiddle, the sticky has a light opacity while scrolling, but when I reach the bottom, where it is supposed to be, I would like it to turn the opacity into 1.0 or something like, just like when hovering the mouse.
You can apply an opaque background to the container to simulate this. When the sticky element will reach the bottom that background will hide the transparency:
.largeDiv {
height: 1500px;
width: 100%;
background: #cccccc;
}
.container {
background:rgba(0,0,255,1);
}
.stickyDiv {
position: sticky;
bottom: 0px;
text-align: center;
background:rgba(0,0,255,0.5);
color: white;
padding: 25px;
}
.stickyDiv:hover {
background:rgba(0,0,255,1);
}
<div class="container">
<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>
</div>
I'm trying to center a div with an unknown height.
I can't find a solution that allows scroll to the top of the div when the viewport height is less than the div height.
HTML
<div>
<p>This will be hidden when <br />
window_height < div_width</p>
<br />
<br />
<br />
How to make it scroll to the top?
</div>
CSS
body {
background: grey;
}
p{
background: green;
}
div {
position: absolute;
left: 50%;
top: 50%;
box-sizing: border-box;
transform: translate(-50%, -50%);
max-width: 500px;
width:100%;
height: 700px; /* Unknown*/
padding: 20px;
background: red;
color: white;
text-align: center;
}
http://codepen.io/Koopa/pen/GpypdX
Thanks
The reason you can't scroll to the top of the div is because the transform property with negative values positions the div off-screen on smaller screens.
In this demo transform is disabled:
http://codepen.io/anon/pen/wKpMyM
Also, when you apply absolute positioning to an element you take it out of the normal flow of the document. This means it is ignored by its container. Hence, the body and html element have zero height.
In this demo the body has a green border (which is totally collapsed):
http://codepen.io/anon/pen/RWxrod
To make your layout work, you can give the body a minimum height (so it can expand along with the div) and, instead of centering with absolute positioning, use a flexbox.
CSS
html { height: 100%; } /* necessary for percentage heights to work */
body {
background: grey;
border: 10px solid green; /* for demo purposes */
min-height: 100%; /* allow body to expand with children */
display: flex; /* establish flex container */
justify-content: center; /* center div horizontally, in this case */
align-items: center; /* center div vertically, in this case */
}
p {
background: green;
}
div {
/* REMOVE
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); */
box-sizing: border-box;
max-width: 500px;
width:100%;
height: 700px; /* Unknown*/
padding: 20px;
background: red;
color: white;
text-align: center;
}
DEMO: http://codepen.io/anon/pen/OyzMvV
Note that flexbox is supported by all major browsers, except IE 8 & 9.
Here's part of a design:
As you can see - its simply a button that is exactly positioned between the two divs. The code is simply:
<div class="uc-apply-widget1">
<div class="top">
</div>
<div class="bottom">
<a>Get Started</a>
</div>
</div>
.uc-apply-widget1
{
.top
{
background-color:#primary-color;
height:30rem;
}
.bottom
{
background-color:#primary-600;
padding:0 1.6rem 1.6rem 1.6rem;
a
{
margin-top:-2.8rem;
}
}
}
However, I've come across a problem with using negative margins. I expected to just be able to move the button outside of the bottom div by applying a half height negative margin. Although the button does move upwards, it doesn't move the full 2.8 rem - the amount of movement is the same even if I apply 50rem.
The other solution is to use position relative, which does move the button up, but does not drag the bottom div upwards with it.
So I'm looking to move the button up by n amount and reduce the bottom div height by n amount - any ideas - I may just be having a bad day.
use
position: absolute;
top: 0; left: 0;
transform: translateY(-50%);
on your button
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Here is one way of realizing your design.
Set the a element to have display: table and position: absolute with
top and left offsets to 0 and 50% respectively.
The display: table rule will give you a shrink-to-fit width, which may be what you need.
You can then use the CSS3 transform property to translate the element by -50% both in the X and the Y directions to get the centering.
The advantage here is that you don't have to specify the dimensions for the a element.
.uc-apply-widget1 {
width: 400px;
margin: 0 auto;
}
.top {
background-color: beige;
height: 10rem;
}
.bottom {
background-color: lightgray;
height: 5rem;
padding: 0 1.6rem 1.6rem 1.6rem;
position: relative;
}
a {
display: table;
width: auto;
margin: 0 auto;
padding: 10px;
border: 1px dotted blue;
position: absolute;
top: 0;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
<div class="uc-apply-widget1">
<div class="top">
</div>
<div class="bottom">
<a>Get Started</a>
</div>
</div>
I am working on a website and the client wants to have something similar to this: http://www.csszengarden.com/?cssfile=202/202.css
There are several overlays that are attached to the edges of the screen, while the text in the center is contained in such a way that the original browser scroll bars remain usable. This design is made elastic by allowing it to stretch at least vertically through an extra div.
The tricky part about my design: I have a fixed size div that is supposed to be centered both vertically and horizontally. What I need now are further divs that surround the centered div and expand as the user resizes their window, in order to serve as overlays to hide the text below them.
This is basically it: http://imgur.com/TNaTU
So broken down even further, what I need is a way to have the four surrounding divs automatically expand or reduce their size so they always fill up all of the screen.
Is there a way to do this without Javascript?
This won't work in IE7 without some crazy hacks, because IE7 does not support display: table and friends.
I will have a look at making this work in IE7 if it's a requirement for you.
Tested in IE8 and recent versions of Firefox, Chrome, Safari, Opera.
Live Demo (edit)
HTML:
<div id="top">top stretch</div>
<div id="middle">
<div id="middleContainer">
<div class="stretch">left stretch</div>
<div id="fixed">fixed</div>
<div class="stretch">right stretch</div>
</div>
</div>
<div id="bottom"><div id="bottomContent">bottom stretch</div></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden
}
#top, #bottom {
position: absolute;
left: 0;
right: 0;
text-align: center
}
#top {
top: 0;
height: 50%
}
#bottom {
bottom: 0;
height: 50%
}
#bottomContent { /* you don't need this if bottom won't hold "content" */
position: absolute;
right: 0; bottom: 0; left: 0
}
#fixed {
width: 400px
}
#middle {
background: #ee1c24;
position: absolute;
width: 100%;
height: 300px;
top: 50%;
margin-top: -150px; /* height/2 */
left: 0;
z-index: 1
}
#middleContainer {
display: table;
width: 100%;
height: 100%
}
.stretch, #fixed {
display: table-cell
}
/* just for demo */
#top, #bottom, .stretch {
background: #b5e61d;
border: 5px solid #000
}
#fixed {
border-top: 5px solid #000;
border-bottom: 5px solid #000
}
I have a following HTML/CSS (simplified):
<body>
<style>
body
{
margin: 0px;
padding: 0px;
color: #fff;
background-color: #090909;
text-align: center;
}
#content
{
width: 500px;
margin: 0px auto;
background-color: blue;
}
#header
{
width: 500px;
margin: 0px auto;
background-color: green;
}
#over-div {
background-color: red;
position: absolute;
height: 20px;
width: 100%;
margin: 0px;
top: 0px;
left: 0px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
</style>
<div id="over-div">aa</div>
<div id="header">
header
</div>
<div id="content">
content here
</div>
</body>
The idea is to have over-div to cover the upper part of the page completely (but do not keep it fixed there, so it is not visible when user scrolls down the page).
If you zoom-in extremely (Ctrl+ wheel) till the horizontal scrollbar appears, you can see that after scrolling completely to the right, the over-div does not cover the header completely to the right side of window.
I hoped that width:100% would mean "always use 100% width of the body", but it seems it is not true for absolute positioned divs.
Tested browsers: Firefox 3.5, Chrome, IE8 (with and without compatibility mode).
Is there any way to get that div cover 100% width of page?
Yes, add this to the #over-div styling:
min-width:500px;
That ensures that #over-div will be at least as wide as your #header and #content divs