I am trying to get a overlay div to fit inside its parents borders.
It works for the iframe below it. Not for the blue div on top.
#screenoverlay {
position: absolute;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
margin-top: 30px;
margin-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
background-color: blue;
opacity: 0.3;
z-index: 1;
}
#screenoverlay {
position: absolute;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: calc(100% - 60px); /* 30px + 30px = 60px negate this from total width, this take care of your div position to be in parent div */
height: calc(100% - 60px); /* 30px + 30px = 60px negate this from total height, this take care of your div position to be in parent div */
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
/* margin : 30px; you can club all above in shorthand */
background-color: blue;
opacity: 0.3;
z-index: 1;
}
if you have
body {
margin: 0;
padding: 0;
}
As you have position: absolute, you can use top, left, right, bottom instead of using margin
#screenoverlay {
position: absolute;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: calc(100% - 60px);
height: calc(100% - 60px);
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background-color: blue;
opacity: 0.3;
z-index: 1;
}
Related
I'm trying to build a component with sticky header and footer, while the content height is dynamic. I tried to use the FIDDLE example (at the bottom of this post), but the behavior is not the same. When I resize the screen, the window just run over the footer/header.
This is what I'm trying to achieve:
The FIDDLE code example:
http://jsfiddle.net/PGC7D/18/
html,body
{
height: 100%;
}
header,footer,div
{
width: 100%;
}
.container
{
height: 100%;
background: pink;
margin: -64px 0 -30px;
padding: 64px 0 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content {
overflow:auto;
height:100%;
}
.block
{
width: 50%;
height: 50%;
display: inline-block;
border: 1px solid yellow;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 30px;
background: gray;
position: relative;
z-index:1;
}
I have a demo here - https://codepen.io/mt-ttmt/pen/mLMGvr
I have a horizontally scrolling content div
I need to have a margin either side of this scrolling content.
I have done this using calc.
When page scrolls the scrolling content sticks to the top of the page using position: fixed;
When this happens I lose the margins.
How can I keep the margins with position: fixed;
html, body{
height: 100%;
}
body {
background: grey;
font-family: sans-serif;
margin: 0;
}
.upper-content{
background: red;
height: 250px;
}
.page-content{
position: relative;
background: white;
height: 2000px;
max-width: 900px;
margin: 0 auto;
}
.content-wrapper{
position: relative;
}
.header-scroll{
border: 1px solid yellow;
left: 50%;
overflow-y: scroll;
position: absolute;
max-width: 900px;
z-index: 20;
transform: translateX(-50%);
width: -webkit-calc(100% - 50px);
}
.content{
display: flex;
float: left;
div{
background: lightgrey;
font-size: 20px;
padding: 40px;
margin-right: 5px;
width: 100%;
&:last-of-type{
margin-right: none;
}
}
}
.fixed{
position: fixed;
top: 0;
//margin: 0 25px 0 25px;
//width: calc(100% - 50px);
}
Change your .fixed class width value.
.fixed{
width: calc(900px - 50px);
}
The grey element, a div with id of #banner is not meant to be sticking out, I gave all the elements inside the div containing the welcome to fusion box, red element, and banner a min-height which adds up to all the min-heights of the elements inside it (welcome to fusion cube, red element, banner).
Basically it's not meant to stick out and I just can't figure out why it is sticking out.
JsFiddle
Not really something productive to ask but I can't figure it out and it's stressful
#main-wrapper{
width: 80%;
height: calc(75.5% - 10px);
margin: 10px auto 0;
min-height: 250px;
}
#page-title {
height: 7%;
font-size: 1.8em;
text-align: center;
padding: 1px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 35px;
}
#content-wrapper {
background: red;
height: 83%;
min-height: 160px;
}
#page-messages {
width: 100%;
height: 20%;
overflow: auto;
}
#banner {
height: 10%;
display: inline-block;
background: grey;
min-height: 55px;
}
footer {
height: 8%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5%;
margin: 20px 0 0;
width: 100%;
display: block;
}
you defined #banner as an inline-block - is that intention? (= not spanning the whole width?). Your fiddle looks quite different from the screenshot you posted...
try making its position: absolute and bottom: 0px;, and give the parent element (#main-wrapper) position: relative, and also a margin-bottom as high as #banner, which prevents content to be hidden by #banner.
(edited, wrong name for parent element)
I am working on a CSS only lightbox solution for my project. I've googled it but so far found only partial solutions.
I am looking for these features:
display content of any width and any height (no fixed height/width)
center verticaly and horizontaly
display scrollbars if content width and/or height overflows lightbox boundary due to viewport dimensions.
So far I have this:
.lb-overlay {
text-align: center;
background: #c0c0c0;
background: rgba(0,0,0,0.5);
border: #a0a0a0 solid 1px;
position: fixed;
left: 0;
top: 0; right: 0; bottom: 0;
z-index: 10000;
}
.lb-overlay:after {
content: '';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
background-color: #f00;
}
.lb-wrap {
display: inline-block;
vertical-align: middle;
position: relative;
background: #ffffff;
max-height: 90%;
max-width: 90%;
z-index: 10001;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
position: relative;
overflow: auto;
margin: 2em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close {
position: absolute; right: 0; top: 0;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close:hover { background-color: #f00000; }
http://jsfiddle.net/TomasReichmann/F4D5u/1/
problems:
vertical scrollbar doesn't appear
horizontal scrollbar works only in chrome
Ideally, I am looking for compatibility with modern browsers and IE8+, but I can live with IE9+
Can you guys help?
Get rid of the unnecessary sizing models
Full-size the overlay as width: 100%; height: 100%;
Use margin: auto and position: absolute; top: 0; left: 0; bottom: 0; right: 0; to center align the wrap within the overlay both vertically and horizontally
Use width and height instead of max-width and max-height
Use padding on wrap to control the border around the content
Use overflow: auto; width: 100%; height: 100%; in content
Summed up: http://jsfiddle.net/F4D5u/8/
Complete style code:
.lb-overlay {
background: #c0c0c0;
background: rgba(0,0,0,0.5);
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
z-index: 10000;
margin: 0;
width: 100%; height: 100%;
}
.lb-wrap {
margin: auto;
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
background: #ffffff;
width: 70%; height: 70%;
padding : 2em;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
overflow: auto;
width: 100%; height: 100%;
}
.lb-close {
position: absolute; right: 0px; top: 0px;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
}
.lb-close:hover { background-color: #f00000; }
I have 2 divs. I gave the first one a height of 70px and now I want the 2nd div to fill up the remaining space of the webpage. This should be relative to the first div. Below is my code: (The 2 divs are header and content)
* {
margin: 0px;
padding: 0px;
}
#header {
background-color: #1874CD;
width: 100%;
height: 70px;
}
#name {
color: #ffffff;
padding: 10px 10px 10px 10px;
font-size: 35px;
font-weight: bold;
font-family: Calibri;
}
#content {
background-color: #F5F5F5;
width: 100%;
height: 650px;
}
How about doing something like this
(JSfiddle example):
#header{
background-color: #1874CD;
width: 100%;
height: 70px;
z-index: 2;
position: relative;
}
#content{
position: absolute;
left: 0px;
top: 0px;
background-color: #F5F5F5;
width: 100%;
height: 100%;
padding-top: 70px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}