I need to make the overlay in this example be able to scroll all the way out of the screen. The content needs to be in a fixed position as it is in the example below. How can I allow the overlay div to be scrolled all the way outside of the viewport?
EXAMPLE SITE:
https://www.ssk.com/
HTML
<div class="test-overlay"></div>
<div class="test-content-container"></div>
CSS
.test-overlay {
background: orange;
position: relative;
width: 100%;
height: 100vh;
text-align: center;
z-index: 995;
}
.test-content-container {
background: rgba(156,64,81,1.00);
position: fixed;
top: 0px;
left: 0px;
font-size: 0;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
}
I solved it by adding 100% padding to the bottom of a container div containing these two elements.
HTML
<div class="test-complete-container">
<div class="test-overlay"></div>
<div class="test-content-container"></div>
</div>
CSS
.test-overlay {
background: orange;
position: relative;
width: 100%;
height: 100vh;
text-align: center;
z-index: 995;
}
.test-content-container {
background: rgba(156,64,81,1.00);
position: fixed;
top: 0px;
left: 0px;
font-size: 0;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
}
.test-complete-container {
height: 100%;
width: 100%;
padding-bottom: 100%;
}
Related
How can I scale the screen dynamically based on resolution when the code looks like this?
.drawing-board {
width: 25%;
height: 25%;
background-color: black;
position: relative;
}
.drawing-board .box-1 {
width: 20px;
height: 20px;
background-color: yellow;
position: absolute;
left: 90px;
top: 90px;
}
.drawing-board .box-2 {
width: 20px;
height: 20px;
background-color: lime;
position: absolute;
left: 30px;
top: 30px;
}
<div class="drawing-board">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
Is there any simple examples for this case?
This question already has answers here:
Fix footer to bottom of page
(14 answers)
Align DIV to bottom of the page
(6 answers)
How can I position my div at the bottom of its container?
(25 answers)
Make div stick to bottom of page
(4 answers)
how to position divs within another div
(3 answers)
Closed 3 years ago.
How can I place the red div always adjacent to the footer even footer height changes?
The bottom position calculation I mean. This is not about sticky footer or positioning footer. Also, the red div must be outside of the footer div like I have given in markup.
Example -
Thanks!
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
.icon {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
<div class="main">
<div class="icon"></div>
<div class="footer">Footer</div>
</div>
One way would be to place the .icon within the .footer and set it's left-margin and top-margin to be negative half of the width/height respectively. You can also make it circular by adding border-radius: 50%.
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.footer .icon {
width: 50px;
height: 50px;
background: red;
position: absolute;
margin: -25px 0 0 -25px;
left: 50%;
z-index: 2;
border-radius: 50%;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
<div class="main">
<p>Lorm ipsum dolor sit amet</p>
<div class="footer">
<div class="icon"></div>
Footer
</div>
</div>
You can try below: Put icon div inside footer div and add margin-top:-25 (half of the height of icon) to the icon and add border-radius: 50%; to make div as circle
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
.icon {
margin-top: -25px;
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
border-radius: 50%;
}
<div class="main">
<div class="footer"><div class="icon"></div>Footer</div>
</div>
Place the icon div in the footer, and set the top to 0;
Also, I modified the translate rule slightly so that the div would be centered horizontally as well as vertically. Also added border-radius: 50% to make the icon round.
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
.icon {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
z-index: 2;
border-radius: 50%;
}
<div class="main">
<div class="footer">
<div class="icon"></div>
Footer
</div>
</div>
I have a chat nav bar with divs for different users in which there is a photo of the user. I want the photo to be a circle. I am doing it with padding-bottom and width, but the problem comes when the width:height ratio of the screen gets bigger the circle gets larger than the nav , because of the padding-bottom being calculated by the width. What is best approach to make this responsive for all screens?https://jsfiddle.net/n386ejzf/
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.chats{
height: 20%;
width: 100%;
background: red;
}
.chat{
float: left;
width: 20%;
height: 100%;
background: yellow;
display: flex;
align-items: center;
}
.img{
width: 10%;
padding-bottom: 10%;
background: blue;
border-radius: 50%;
}
<div class="chats">
<div class="chat">
<div class="img">
</div>
</div>
</div>
Use viewport height units.
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
.chats {
height: 20%;
width: 100%;
background: red;
}
.chat {
float: left;
width: 20%;
height: 100%;
background: yellow;
display: flex;
align-items: center;
}
.img {
margin: auto;
width: 10vh;
height: 10vh;
background: blue;
border-radius: 50%;
}
<div class="chats">
<div class="chat">
<div class="img">
</div>
</div>
</div>
I am trying to get my div container .home-img-text to center vertically in the middle of its parent div .home-img. I have tried setting .home-img-text to position: absolute, relative, I tried padding-top and a bunch of other things, it won't move at all from the top of its parent div.
This can be viewed at this site:
click here
I did not create a snippet because the image will not show with my parallex effect.
Does anyone see what is wrong?
CSS:
.home-img {
position: relative;
margin: auto;
width: 100%;
height: auto;
vertical-align: middle;
}
.parallax-window {
min-height: 300px;
background: transparent;
position: relative;
}
.home-img-text {
position: relative;
z-index: 99;
color: #FFF;
font-size: 4em;
text-align: center;
top: 40%;
}
HTML:
<div class="home-img">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
The proper way to vertically center a box model element is:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Update: this is what happens in your page:
.grand-parent {
position: relative;
width: 300px;
height: 300px;
top: 10%;
left: 50%;
transform: translateX(-50%);
overflow: visible;
border: 1px solid blue;
}
.parent {
height: 400px;
border: 1px solid red;
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}
<div class="grand-parent">
<div class="parent">
<div class="child">Quality Solutions</div>
</div>
</div>
To vertically center .child in .grand-parent instead of .parent remove position:relative from .parent.
I'm trying to complete an assignment for "The Odin Project." The goal is to create an etch-a-sketch-like webpage. I've gotten decently far, but I've been stuck trying to dynamically resize a grid of divs.
I have a container div that I set to 500x500px. However nothing I've tried has the container divs filling up the space appropriately. I feel that I'm missing something trivial in the CSS, but can't figure out what.
CSS:
.outer {
width: 500px;
height: 500px;
position: absolute;
}
#gridtable {
width: 100%;
height: 100%;
}
.outtable {
background: #CCC;
min-height: 1%;
height: auto;
min-width: 1%;
width: auto;
position: absolute;
display: inline-block;
}
.newcolor {
background: blue;
min-height: 1%;
height: auto;
min-width: 1%;
width: auto;
position: absolute;
display: inline-block;
}
JSFiddle here.
you need to set your table elements to fill the available width as well (i.e. 100%) at the moment they default to the minimum space needed (this is table defaults)
.outer {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
}
#gridtable {
width: 100%;
height: 100%;
}
table, tbody, tr, td{
width: 100%;
}
.intable{display: flex; }
.intable td{}
.outtable{
background: #CCC;
min-height: 1%;
height: auto;
min-width: 100%;
width: auto;
position: absolute;
display: inline-block;
}
.newcolor {
background: blue;
min-height: 1%;
height: auto;
min-width: 100%;
width: auto;
position: absolute;
display: inline-block;
}
jsfiddle: http://jsfiddle.net/o4poarey/6/
Use 100% not px
<...width="100%" height="100%"...>
instead of
<...width="100px" height="100px"...>
Also put in a table and set the table to 100%
<table style="width:100%">
<tr>
<td><...width="100%" height="100%"...></td>
</tr>
</table>