body, html {
height: 100%;
}
#nav-left {
width: 155px;
min-height: 100%;
background-color: #292a28;
position: absolute;
z-index: 10;
}
When on my page, height growing up (dynamic), my height on div did not growing up.page
Try this
html, body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
#nav-left {
width: 155px;
min-height: 100%;
background-color: #292a28;
position: absolute;
z-index: 10;
}
Working example: http://liveweave.com/9gb8mF
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;
}
Alright so I got 1 div that is float left and one with float right, now for some reason I cannot make them go to the side where they should be. They are kinda now both overlapping eachother
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
}
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left"></div>
<div id="page_right"></div>
</div>
I also tried using a method with display inline block but it didnt work out so well
Try this with your additional css
CSS
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left {
left: 0;
}
#page_right {
right: 0;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
remove left: 0px
OR
remove position: absolute
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
z-index: 1000;
}
the overflow in happened because you given left:0px and position:absolute for both the divs,I'm solved this and and added the snippet below.
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left{
left: 0px;
}
#page_right{
background-color:green;
float:right;
position: absolute;
right: 0px;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left">
</div>
<div id="page_right">
</div>
</div>
</body>
</html>
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;
}
If you extend the result window, the video overlaps the section below it.
I want the video to stay within the height of the section, in this case height:100vh.
How would I go about this? Here's a jsFiddle.
* {
padding: 0px;
margin: 0px;
}
.Page-01 {
width: 100%;
height: 100vh;
background-color: #0000ff;
margin: 0;
padding: 0;
z-index: 15;
}
.Page-02 {
width: 100%;
height: 100vh;
background-color: #FFFF00;
margin: 0;
padding: 0;
border: 0;
z-index: 15;
}
#videowrapper {
padding-bottom: 56.2%;
overflow: hidden;
z-index: 15;
height: 0;
}
#videowrapper iframe {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Page-03 {
width: 100%;
height: 100vh;
background-color: #FF0000;
margin: 0;
padding: 0;
z-index: 15;
}
There is some odd stuff going on there because #videowrapper iframe is set to height: 100%; but its parent's height is #videowrapper { height: 0; padding-bottom: 56.2%;
Try setting this instead:
#videowrapper {
overflow: hidden;
z-index: 15;
height: 100%;
}