I am not getting the scroll on the browser. i have tried with overflow: scroll and also with no over flow.
body {
margin: 0;
overflow: scroll;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 320px;
background-color: #1f1f1f;
color: white;
text-align: center;
}
.slide {
position: fixed;
top: 0;
right: 0;
height:450px;
width: 1041px;
background-color: orange;
text-align: center;
}
.meanu {
position: fixed;
top: 50%;
bottom: 50%;
width: 80%;
left: 20%;
right: 0;
}
That is because everything is position:fixed and these elements do not affect the flow.
As far as scrolling is concerned, the fixed positioned elements do not exist.
Related
I'm trying to accomplish a very standard way of showing content with a video taking up 100% of the screen's height and a footer bellow it.
Instead of (1) I'm getting (2):
HTML:
<section class="home">
<video src="movie.mp4" muted loop autoplay></video>
<div class="overlay"></div>
</section>
<section class="footer">
</section>
CSS:
.home {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: 100vh;
padding: 0px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
}
.home video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1.0;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0.0, 0.0, 0.0, 0.4);
}
.footer {
position: relative;
top: 1000;
left: 0;
width: 100%;
height: 400px;
z-index: 50;
background: aqua;
}
How can I add a footer or any other content bellow a video that takes up 100% of the screen's height?
Just remove:
.home {
position: absolute;
top: 0px;
left: 0px;
}
.home video {
position: absolute;
top: 0;
left: 0;
}
.footer {
position: relative;
top: 1000;
left: 0;
}
Using position: absolute or position: fixed tells web browser to not "reserve" space in document structure for this element and makes your footer floating above video. According to https://www.impressivewebs.com/css-things-that-dont-occupy-space/ - These elements are taken out of the document flow, so elements that appear after them in the source order will not flow around or below them.
You have a simple layout and take a notice - div's are elements that takes all of the page's width by default and stack one under another so don't use any positioning here (except for overlay).
Something like this should work (with small improvements to do):
* {
margin: 0;
}
.home {
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
}
.home video {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1.0;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0.0, 0.0, 0.0, 0.4);
}
.footer {
height: 400px;
z-index: 50;
background: aqua;
}
From what I understand, you have all three elements - .home, video, and .overlay have absolute positioning which is why the footer starts from the top.
Changing the position of .home to relative should work just fine.
And it would be better to remove the top: 1000; from the footer.
.home {
position: relative;
top: 0px;
left: 0px;
width: 100%;
min-height: 100vh;
padding: 0px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
}
.home video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1.0;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0.0, 0.0, 0.0, 0.4);
}
.footer {
position: relative;
left: 0;
width: 100%;
height: 400px;
z-index: 50;
background: aqua;
}
I set up 2 divs with some backgrounds and I want to set div2 under div 1, but I don't know how to do this, please help. Now, div2 is over div1 and div1 is invisible on this website.
.div1 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
}
.div2 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
}
<div class='div1'>Some very important text...</div>
<div class='div2'>Not so important text...</div>
Maybe this helps you, I added a top: 100%; to div2.
.div1 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
background-color: red;
}
.div2 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 100%; /*Changed*/
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
background-color: blue;
}
.div1::-webkit-scrollbar {
display: none;
}
.div2::-webkit-scrollbar {
display: none;
}
<div class="div1">a</div>
<div class="div2">a</div>
In my webpage I have a left and a right part, they are not on the same nesting though. I want the left part to fill 25% of the page and the right part to fill the rest of the width.
Simply putting 75% isn't cutting it for me because the right part also needs a 30px right margin. A right padding won't work because my content and background-color overflows then.
Do you have an idea how to solve this?
The .left (blue) and .right(yellow) div should always perfectly meet each other and the .right needs to keep it's 30px right margin.
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: 75%;
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
It's not a good idea to create a layout using only absolute position. You may better rely on flexbox for example:
body {
height: 100vh;
margin: 0;
display: flex;
background: grey;
}
.left {
flex: 1;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
flex: 4;
margin-top: 45px;
margin-right: 30px;
background-color: yellow;
}
<div class="left">TEST</div>
<div class="right">TEST</div>
But in case you want to keep your code, you need to consider the margin within the calculation of the width:
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: calc(75% - 30px);
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
As demonstrated here: http://codepen.io/anon/pen/rVPqeL
I am using 3 simple divs and I want to obtain an effect of a "global" scrollbar that has to go over the header.
The html is very basic
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
</div>
and here's the css:
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
.content {
margin-top: 50px;
min-height: 2500px;
background-color: blue;
}
The scrollbar keeps going under the header div. What am I doing wrong?
The below code does the trick
http://codepen.io/anon/pen/XbOxgp
.container {
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
z-index: 2;
}
.content {
z-index: 1;
width: 100%;
position: absolute;
top: 60px;
min-height: 2500px;
background-color: blue;
}
If I understand correctly you want the scrollbar always ontop. To do so change your css to the following
html{
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
Scroll on html will allow the entire page to have scroll while keeping header static and remove scroll from container.
.container {
margin-top:50px; /* create room for header*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
margin-top:-50px; /* move up by 50px*/
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
fixed positioned elements have "no width and height".
Hope it helps :)
EDIT: See this pen: This
Ps. I guess you also want to remove the margin of .content
i tried with replacing position:fixed with position:sticky and added top:0 and it worked well for me, no more overlapping vertical scrollbar.
.header {
position: sticky;
top: 0;
width: 100%;
height: 50px;
background-color: red;
}
Remove overflow-y: scroll; from your .container
put the overflow-y: scroll; inside the body element:
body {
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
I am not sure if this is possible, without some JavaScript at lest. What i am trying to do is keep the content in the sidebar within the viewport for horizontal scroll but not vertical scroll (this issue occurs on low resolutions). I have put together a quick js fiddle to demonstrate the issue http://jsfiddle.net/evkhvvdr/ any input is greatly appreciated.
Here is the CSS or view the js fiddle
body {
position: relative;
margin: 0;
}
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
background: blue;
left: 0;
}
.sidebar-inner {
position: fixed;
left: 0;
}
.content {
width: 1400px;
background: pink;
height: 2000px;
}
You can fix sidebar on screen, but put it under content with z-index, so when you scroll, you scroll only content, sidebar is still on screen, but under the content.
body {
margin: 0;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100px;
background: blue;
z-index: 0;
}
.sidebar-inner {
width: 100px;
position: relative;
left: 0;
}
.content {
position: absolute;
width: 1400px;
background: pink;
height: 2000px;
margin-left: 100px;
}