I'm trying to make a div cover my whole page. Currently, the problem is that it is only covering the size of the viewport (for example 1920x1080px).
That's the CSS for the div I'm using at the moment:
#cursor-container {
position: absolute;
z-index: 99999;
pointer-events: none;
overflow-x: auto;
background-color: rgba(0, 0, 0, 0.25);
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
At the moment, it looks like this:
But it should look like this:
How can I fix this?
first, make sure that the div you are using is the child of the body element, then change the position to position: fixed; ,
#cursor-container {
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 99999;
pointer-events: none;
overflow-x: auto;
background-color: rgba(0, 0, 0, 0.25);
}
This will make sure that your div stays fixed at the screen even if the page scrolls down and it will cover the whole screen
also, set the parent's width and height to 100% as well,
html, body {
width: 100%;
height: 100%;
}
I want something like this (the pink circle): CSS quarter circle 100vh example.
So far, I have a half-circle (see CSS below), but when I try to make it 100vh, it stretches and I can't figure out how to keep it proportional.
.circle {
height: 180px;
width: 90px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background: red;
margin: 100px;
position: absolute;}
Any insights greatly appreciated. Thanks
I modified the code to only use 200vh to calculate both width and height of circle. This will give you a perfect circle at any screen size.
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 200vh;
width: 200vh;
position: absolute;
bottom: -100vh;
right: -100vh;
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
You can do it like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 200vh;
width: 125.5vw; /* if exactly 16:9 vw/vh aspect ratio */
position: absolute;
bottom: -100vh;
right: -56.250vw; /* if exactly 16:9 vw/vh aspect ratio */
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
Conclusion: This works perfectly if the screen viewport is exactly at 16:9 aspect ratio (see it inside the editor (not "Run code snippet") without Menu Bar & Bookmarks Toolbar but better to see it in full screen), anything else than that fails so I wouldn't recommend using viewport units for this task. If anyone can prove me wrong or do it better, go ahead.
And with px:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 180px;
width: 180px;
position: absolute;
bottom: -90px;
right: -90px;
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
you can start to keep the box into the ratio you want and center it when it doesn't fill the whole screen (=> downscaling to fit within the screen)
to size things, you can relay on %, vw,vh,vmax and or vmin units.
basicly you can start with size and max-size using the viewport as reference for the main box:
height:100%;
width:100%;
max-width:179vh;/* height viewport*/
max-height:56vw;/* width viewport*/
to align content you can use the flex display and margins and position.
To draw that 1/4 circle, you need a square that is at least the height of your box if it is to be drawn from border-radius. ( else a radial-gradient would do just fine).
for the vertical text, you may take a look at writing-mode.
A mix of CSS3 rules and positionning method can allow to do something that is about fluid.
Run the snippet below in fullpage and resize your window (heigh/width/both) your browser to see behavior.(or play with the codepen)
html {
height: 100%;
display: flex;
background: #ccc;
}
body {
margin: auto;
background: linear-gradient( to right, rgb(231, 231, 231) 25%, rgb(225, 207, 207) 25%);
height: 100%;
width: 100%;
max-width: 179vh;
max-height: 56vw;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
box-shadow: 0 0 0 2px;
/* debug , see me */
}
/* make div be squares */
div:before {
content: "";
display: inline-block;
padding-top: 100%;
vertical-align: top;
}
.small {
border-radius: 50%;
background: rgb(101, 112, 168);
width: 25%;
margin-left: 13%;
box-shadow: 20vmin 20vmin 40vmin;
}
.big {
background: linear-gradient(to top, rgb(195, 90, 131), rgb(195, 90, 131)) no-repeat 0 0;
width: 56%;/* according to the ratio choosen */
border-top-left-radius: 100%;
flex-shrink: 0;/* avoid flex to shrink it */
margin: auto 0 0 auto;
}
/* position piece of text via absolute */
p {
margin: 0;
position: absolute;
bottom: 1%;
right: 5%;
font-size: 15vmin;
white-space: nowrap;
color: white;
}
p span {/* this rules might need to be tune to specific font-family*/
width: 0.25em;
display: inline-block;
vertical-align: -0.1em;
font-size: 0.155em;
writing-mode: vertical-lr;
transform: scale(-1);/*=> writing-mode:sideways-lr; not avalaible everywhere*/
}
h1,
body:before {
top: 0;
color: rgb(101, 112, 168);
position: absolute;
width: 5em;
font-size: 2vmin;
margin: 12vmin 0 5vmin 5vmin;
}
body:before {
content: "2017";
top: auto;
bottom: 0;
font-weight: bold;
}
h1:before {
content: "HB";
color: rgb(195, 90, 131);
border-radius: 50%;
position: absolute;
bottom: 150%;
font-size: 2.5em;
width: 0.75em;
height: 0.75em;
line-height: 0.75em;
letter-spacing: -0.35em;
border: solid 1px;
text-indent: -0.35em;
overflow: hidden;
}
<h1>VISUAL EXPLORATION</h1>
<p><span>BACK TO</span>BASIS</p>
<div class="small"></div>
<div class="big"></div>
By using the same view port unit for both height and width, you can achieve a perfect circle. Then putting it within a container which is fixed to the height of the view port and hiding the rest of the overflow will allow you to remove any unnecessary scroll bars and still allow for content below the circle.
The below demo will show the circle proportionally correct, always 100% of the view port height while making sure it is always a perfect circle.
It will obviously look better in full screen.
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: #dedede;
}
.dark {
background: #777777;
}
.circle {
width: 200vh;
height: 200vh;
border-radius: 100%;
position: absolute;
right: -100vh;
background: pink;
}
<div class="container">
<div class="circle"></div>
</div>
<div class="container dark">
</div>
I am currently trying to create a div that overlays a canvas element, both of these are contained in a wrapper div. The wrapper has a fixed height but when i add a height of 100% to the overlay div it still has a height of 0. Can anyone help me out with this? Here's the html:
<div id="canvas-wrap">
<canvas id="canvas" style="background-image: url('<%= #post.image.url%>');"></canvas>
<div id="overlay">
</div>
</div>
And the css:
#canvas-wrap {
position: relative;
height: 400px;
min-height: 400px;
}
#canvas {
width: 100%;
height: 100%;
border-radius: 7px;
box-shadow: 2px 1px 6px #a0a0a0;
}
#overlay {
position: absolute;
height: 100%;
top: 0;
left: 0;
}
Is this something to do witht he fact that im using a canvas element as i havent ran into this problem before. Thanks in advance everyone.
try this:
#overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
Here you are using Background Image property. That will not decide the width of the element. So you can not expect the width change of the element.
So it appears null height instead of zero width. (There was a height but no width)
So assign a fixed width to the parent and align the background image to that width
#canvas-wrap {
position: relative;
height: 400px;
min-height: 400px;
width: 600px;
min-width: 600px;
}
#canvas {
width: 100%;
height: 100%;
border-radius: 7px;
box-shadow: 2px 1px 6px #a0a0a0;
background-size: cover;
background-repeat: no-repeat;
}
I have a container (main-container) with position=fixed.
I have other containers inside this container.
<div class="main-container">
<div class="container0">
<div class="container">
<div class="wrapper">
<iframe name="case-overlay-iframe" class="preview-iframe voice" allowfullscreen="true" src="https://cc-api-cp.adobe.io/api/v2/voice/assets/4ICee/video/embed?api_key=LucaApp1"></iframe>
</div>
</div>
</div>
</div>
I need the iframe to keep its aspect ratio of 16:9 as people resize the window.
I also need it to display in the center (vertically & horizontally centered)) every time.
I also need it to keep a maximum height and width of 1280px (width) and 720 (height).
I use the CSS below to achieve this, but unfortunately, the CSS doesn't do the following:
- The Iframe is not vertically and horizontally centered.
- The iframe must keep a width of calc(100% - 440px) (see below) but its width gets smaller than that.
.main-container {
position: fixed;
width: 100%;
height: 100%;
z-index: 1005;
top: 0px;
left: 0px;
overflow: auto;
}
.container0 {
position: absolute;
min-width: 700px;
min-height: 400px;
width: 100%;
height: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 200;
background: #262626;
}
.container {
background: #1c1c1c;
width: calc(100% - 440px);
height: 100%;
display: flex;
max-width: 1280px;
max-height: 720px;
}
.wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
width: 100%;
margin: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Can someone please help?
html, body {
min-height: 100%;
margin: 0;
padding: 0;
overflow-y: hidden;
}
#sidebar {
background-color: white;
height: 100%;
width: 20%;
float: left;
position: fixed;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
padding-bottom: 6em;
overflow-x: scroll;
}
The sidebar has a scroll which moves approximately 50px off the screen, please refer to image provided. I have tried using padding or margin on both body and #sidebar, to no avail.
Because you have no set height on #sidebar's container, 100% height will be auto. The scrollbar will be the size of it's container (#sidebar) so it will just stretch. Try something like this:
#sidebar {
top: 0;
bottom: 0;
}
You could also use window units:
#sidebar {
height: 100vh;
}