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%;
}
Related
My sticky element does not start at the edge of the screen and it is very annoying:
div.sticky {
height: 50px;
width: 100%;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: black;
padding: 50px;
font-size: 20px;
z-index: 500;
html, body {
overflow-x: visible;
}
}
Your issue is most likely coming from the margin that is applied to the body by default, just make sure to set it to 0.
* {
box-sizing: border-box;
}
html,
body {
overflow-x: visible;
margin: 0;
padding: 0;
height: 1000px;
}
div.sticky {
height: 50px;
width: 100%;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: black;
padding: 50px;
font-size: 20px;
z-index: 500;
}
<div class="sticky"></div>
What I want is creating a border surrounding all my page content, the top border is fine but the others and especially the bottom border is not positioned where I want, I want it to be always in the bottom of my page.
html,
body {
min-height: 100%;
height: 100%;
}
body {
margin: 0;
padding: 45px;
min-height: 100%;
z-index: 1;
}
#barTop,
#barLeft,
#barBottom,
#barRight {
display: block;
position: absolute;
background-color: #f8ee53;
z-index: 2;
}
#barTop,
#barBottom {
right: 20px;
left: 20px;
height: 25px;
}
#barTop {
top: 20px;
}
#barBottom {
bottom: 20px;
}
#barLeft,
#barRight {
top: 20px;
bottom: 20px;
width: 25px;
}
#barLeft {
left: 20px;
}
#barRight {
right: 20px;
}
<div id="barTop"></div>
<div id="barRight"></div>
<div id="barBottom"></div>
<div id="barLeft"></div>
Result:
My border does not include all the content of my page.
remove this :
html,
body {
min-height: 100%;
height: 100%;
}
and use this
body {
margin: 0;
padding: 45px;
min-height: 100%;
z-index: 1;
}
#barTop, #barLeft, #barBottom, #barRight {
display: block;
position: absolute;
background-color: #f8ee53;
z-index: 2;
}
#barTop, #barBottom {
right: 20px;
left: 20px;
height: 25px;
}
#barTop {
top: 20px;
}
#barBottom {
bottom: 20px;
}
#barLeft, #barRight {
top: 20px;
bottom:20px;
width: 25px;
}
#barLeft {
left: 20px;
}
#barRight {
right: 20px;
}
You should be able to fix this by adding the following under your existing body selector:
body {
box-sizing: border-box;
}
I made a jsfiddle that demonstrates it, with a black background on the body to better illustrate it:
JS Fiddle
The problem is caused by the padding on the body. It is not taken into account when the height is calculated at 100%. Either remove the padding or do what mtr web suggested and add box-sizing: border-box; Run the snippet below to see it work.
html,
body {
min-height: 100%;
height: 100%;
}
body {
margin: 0;
padding: 45px;
min-height: 100%;
z-index: 1;
box-sizing: border-box;
}
#barTop,
#barLeft,
#barBottom,
#barRight {
display: block;
position: absolute;
background-color: #f8ee53;
z-index: 2;
}
#barTop,
#barBottom {
right: 20px;
left: 20px;
height: 25px;
}
#barTop {
top: 20px;
}
#barBottom {
bottom: 20px;
}
#barLeft,
#barRight {
top: 20px;
bottom: 20px;
width: 25px;
}
#barLeft {
left: 20px;
}
#barRight {
right: 20px;
}
<div id="barTop"></div>
<div id="barRight"></div>
<div id="barBottom"></div>
<div id="barLeft"></div>
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
There are lot of solutions for this problem that puts height 100% and width 100%, but the solutions don't take care about the content under the modal.
In my example in jsfiddle there is an error. Where am I wrong?
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal-content {
height: 100%;
border-radius: 0;
}
Here the jsfiddle
I have found a solution that works and updated my jsfiddle
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.modal-dialog {
position: fixed;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.modal-header {
position: absolute;
top: 0;
left: 0;
right: 0;
border: none;
}
.modal-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 0;
box-shadow: none;
}
.modal-body {
position: absolute;
top: 50px;
bottom: 0;
font-size: 15px;
overflow: auto;
margin-bottom: 60px;
padding: 0 15px 0;
width: 100%;
}
.modal-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 60px;
padding: 10px;
background: #f1f3f5;
}
/* to delete the scrollbar */
/*
::-webkit-scrollbar {
-webkit-appearance: none;
background: #f1f3f5;
border-left: 1px solid darken(#f1f3f5, 10%);
width: 10px;
}
::-webkit-scrollbar-thumb {
background: darken(#f1f3f5, 20%);
}
*/
The problem is with the height being 100% as it fills only the window height. Use min-height instead:
.modal-dialog {
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
Updated fiddle
body {
background-color: #FFFDEC;
}
.header {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: #04A7A6;
margin: 0;
display: block;
z-index: 10;
}
.headermenu {
xposition: fixed;
top: 50px;
left: 0;
height: 50px;
width: 100%;
background-color: #333;
color: #333;
margin: 0;
overflow: visible;
z-index: 20;
}
This code => doesn't display my second header...? I know it has something to do with the header conflicting with the headermenu, but it doesn't conflict with the body background?
should
xposition:fixed;
be
position:fixed;
?
Working Fiddle