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>
Related
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>
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
I'm designing an ebay template. However, a problem that I keep running into is that there seems to be a whitespace which I can't get rid of between the mainContainer div and the footer. I have highlighted the two divs with green and red to make the problem clear.
I want to know how I can get rid of the whitespace, and have the two divs underneath each other.
http://jsfiddle.net/4vembvLg/
Help is appreciated.
The whole code is on jsfiddle
* {
margin: 0;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
.footer {
height: 600px;
margin: 0;
padding: 0;
background-color: red;
}
#top-bar {
background: url(http://demo.presthemes.com/centrikids/themes/pt_centrikids/img/bg_topbottom.png) repeat-x;
height: 15px;
}
Remove the top rule in the mainContainer class and pageContainer id
.mainContainer {
background-color: green;
height: 900px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
text-align: left;
/* top: -400px; */
width: 100%;
}
#pageContainer {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
margin: 0 auto;
padding: 0;
position: relative;
/* top: -267px; */
width: 1393px;
}
I believe I found your issue, top: -400px;
.mainContainer {
background-color: green;
height: 900px;
width: 100%;
/* background: #f8f8f8; */
padding: 0;
overflow: hidden;
margin: 0;
text-align: left;
position: relative;
top: -400px; <----------------This Guy here
}
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%;
}
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