I'm trying to arrange elements on a z-axis and want to order them. As you can see in the example, the second section looks like if it's above the first element (pink background) but has a lower value on the z-axis (-2500px). What am I missing?
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#content,
#wrapper {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrapper {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#content {
-moz-perspective: 10000px;
-ms-perspective: 10000px;
-webkit-perspective: 10000px;
perspective: 10000px;
-webkit-transform: translate3d(0, 0, 0) perspective(10000px);
transform: translate3d(0, 0, 0) perspective(10000px);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
section {
position: absolute;
color: black;
opacity: 0;
left: 0;
top: 0;
overflow: hidden;
}
section.fullscreen {
height: 100%;
width: 100%;
}
section.fullscreen .section-content {
background: pink;
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
section:nth-of-type(2) {
color: red;
background: black;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Z-Axis</title>
<link href="zaxis/zaxis.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div class="initialized" id="wrapper">
<div id="content">
<section style="transform: translate3d(-0.5px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;" id="start" class="fullscreen">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Accusamus adipisci aliquam aspernatur
atque aut blanditiis consectetur consequuntur delectus fugiat magnam,
necessitatibus nisi, nobis odio optio placeat quia repellendus rerum
sed?
</div>
</div>
</div>
</div>
</div>
</section>
<section style="transform: translate3d(25px, 193.5px, -1500px) scale3d(0.616406, 0.616406, 0.316406); opacity: 0.316406;" id="offer">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Accusamus adipisci aliquam aspernatur
atque aut blanditiis consectetur consequuntur delectus fugiat magnam,
necessitatibus nisi, nobis odio optio placeat quia repellendus rerum
sed?
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
The second element is displayed like it is offset by 1500px, but that's all that the 3D transform does. To really put it "behind" the first section and hide it you need to use z-index:
section:nth-of-type(1) { z-index: 2; }
section:nth-of-type(2) { z-index: 1; }
See JSFiddle.
Related
my CSS class with pseudo
.fc-state-col:hover .fc-state-col::after
does not work everything else is fine
The following CSS classes with hover pseudo is working fine
.fc-state-col:hover .hover-show
.fc-state-col:hover .hover-moveUp
I have an image in a bootstrap .container-fluid with a color overlay. That container-fluid has 6 equal full height columns inside it.
Upon hover, the overlay on the image should disappear then a new image shows up. (this works no problem here)
A new overlay on the specific column where the mouse hovers will show up together with a paragraph and a button at the bottom of that column.
So only the specific column where the mouse hovers will have a color overlay. the remaining 5 columns have no color overlay. (this does not work)
The paragraph and button show up upon hover but the color overlay on the columns does not. I hope someone can spot my error or what I am missing thank you so much in advance
:root {
--blue-opaque: hsl(207, 59%, 33%, .85);
--red-opaque: hsl(353,87%,25%, .85);
--yellow: #e9ba2d;
--fc-overlay: rgba(107, 17, 28, .75);
--white-vl: rgba(255, 255, 255, .85);
}
#fc-red-overlay {
position: absolute;
background-color: var(--red-opaque);
display: block;
width: 100%;
height: 50vw;
top: 4%;
right: 0;
left: 0;
margin: auto;
z-index: 2;
opacity: 1;
transition: 600ms ease;
}
#fc:hover #fc-red-overlay {
opacity: 0;
position: absolute;
z-index: -10;
}
.fc-state-col {
height: 100%;
padding-bottom: 5rem;
}
#fc-red-overlay {
position: absolute;
background-color: var(--red-opaque);
display: block;
width: 100%;
height: 50vw;
top: 4%;
right: 0;
left: 0;
margin: auto;
z-index: 2;
opacity: 1;
transition: 600ms ease;
}
#fc:hover #fc-red-overlay {
opacity: 0;
position: absolute;
z-index: -10;
}
.fc-state-col {
height: 100%;
padding-bottom: 5rem;
}
.fc-state-col::after {
content: "";
position: absolute;
background-color: var(--red-opaque);
width: 100%;
height: 100%;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
transform-origin: top;
transform: scaleY(0);
transition: transform 500ms ease-in;
}
.fc-state-col:hover .fc-state-col::after {
transform: scaleY(1);
}
.hover-show {
position: absolute;
bottom: 2em;
opacity: 0;
padding: 0 2rem;
}
.fc-state-col:hover .hover-show {
opacity: .9;
}
.hover-moveUp {
transform-origin: bottom;
transition: transform 500ms ease-in;
}
.fc-state-col:hover .hover-moveUp {
position: relative;
top: -17rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="row fc-states-row align-items-end">
<div class="col-2 d-flex flex-column justify-content-end fc-state-col">
<div class="vl hover-moveUp"></div>
<h3 class="text-white text-center text-uppercase align-self-center hover-moveUp">Location 1</h3>
<p class="text-white text-center pt-3 hover-show">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam eligendi quas corporis excepturi officia, beatae ad dolorem aperiam. Reprehenderit suscipit eius iusto officiis ad Necessitatibus numquam laboriosam saepe, atque fugit, magni neque dolores
nemo nobis, architecto quaerat corrupti.</p>
<button class="btn btn-warning border-0 text-white align-self-center hover-show">VIEW DETAILS</button>
</div>
<div class="col-2 d-flex flex-column justify-content-end fc-state-col">
<div class="vl hover-moveUp"></div>
<h3 class="text-white text-center text-uppercase align-self-center hover-moveUp">Location 1</h3>
<p class="text-white text-center pt-3 hover-show">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam eligendi quas corporis excepturi officia, beatae ad dolorem aperiam. Reprehenderit suscipit eius iusto officiis ad Necessitatibus numquam laboriosam saepe, atque fugit, magni neque dolores
nemo nobis, architecto quaerat corrupti.</p>
<button class="btn btn-warning border-0 text-white align-self-center hover-show">VIEW DETAILS</button>
</div>
</div>
<div class="row" id="fc-red-overlay"></div>
After several hours of thinking and not thinking about it, I was able to solve this problem.
I added a new empty div at the bottom of each column
<div class="col-2 d-flex flex-column justify-content-end fc-state-col">
<div class="vl hover-moveUp"></div>
<h3 class="text-white text-center text-uppercase align-self-center hover-moveUp ">LOCATION</h3>
<p class="text-white text-center pt-3 hover-show">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam eligendi quas corporis excepturi officia, beatae ad dolorem aperiam. Reprehenderit suscipit eius iusto officiis ad Necessitatibus numquam laboriosam saepe, atque fugit, magni neque dolores nemo nobis, architecto quaerat corrupti.</p>
<button class="btn btn-warning border-0 text-white align-self-center hover-show">VIEW DETAILS</button>
<div class="fc-state-overlay"></div>
</div>
then I changed the CSS as follows:
.fc-state-overlay::after {
content: "";
position: absolute;
background-color: var(--red-opaque);
width: 100%;
height: 100%;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
transform: scaleY(0);
transform-origin: top;
transition: transform 350ms ease-in;
}
.fc-state-col:hover .fc-state-overlay::after {
transform: scaleY(1);
}
instead of:
.fc-state-col::after {
content: "";
position: absolute;
background-color: var(--red-opaque);
width: 100%;
height: 100%;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
transform-origin: top;
transform: scaleY(0);
transition: transform 500ms ease-in;
}
.fc-state-col:hover .fc-state-col::after {
transform: scaleY(1);
}
Maybe I cannot use the same element as the hover trigger and also the same element with the ::after pseudo content which in this case is the color overlay.
So I created an empty div with the hover on overlay effect
The below code makes the content wrap or makes the div occupy only 50% of the browser's width in windows(thus making the content in to wrap if the content width is more than 50% of the browser width). But it's not happening in mac, it is trying to occupy 100% of the browser's width and wraps if the content width is more than 100% of the browser's width. Why does this difference occur?
see the demo in jsfiddle https://jsfiddle.net/sevenu/egtvc95j/4/
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#E7E9EB;
}
#myDIV {
height:300px;
background-color:#FFFFFF;
}
.bluediv {
background-color:lightblue;
width: fit-content;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h1>The width: fit-content position: absolute and left 50%<</h1>
<div id="myDIV">
<div class="bluediv">
Lorem ipsum dolor sit amet. Est quidem eius et nihil modi et omnis commodi et error galisum?
</div>
</div>
</body>
</html>
The issue is the use of left: 50%.
Try like below:
body {
background-color: #E7E9EB;
}
#myDIV {
height: 300px;
background-color: #FFFFFF;
}
.bluediv {
background-color: lightblue;
width: fit-content;
position: absolute;
inset: auto 0; /* left and right = 0*/
margin: auto;
}
<h1>The width: fit-content position: absolute and left 50%</h1>
<div id="myDIV">
<div class="bluediv">
Lorem ipsum dolor sit amet. Est quidem eius et nihil modi et omnis commodi et error galisum?
</div>
</div>
So I have this very simple grid layout that has 3 columns. The 3rd column has 3 items which are a header, a div and an input element.
Setting the width=100%; for the input I thought it would fit to the 3rd columns actual size but apparently it grows bigger than the div.
I thought it would be the padding of the conversation div but it turns out that even after removing the padding there is still an overlap.
EDIT: The input item should only take the length of the 3rd column.
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 9fr;
}
.directories {
background-color: rgb(17, 200, 110);
}
.chats {
background-color: rgb(220, 220, 120);
height: 100vh;
}
.conversation {
background-color: rgb(220, 20, 120);
padding: 8px;
position: relative;
}
.conversation-head {
position: sticky;
top: 0;
background-color: white;
}
input {
min-width: 100%;
max-width: 100%;
height: 32px;
position: absolute;
bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="directories">
Something Something
</div>
<div class="chats">
Chat Chat Chat
</div>
<div class="conversation">
<div class="conversation-head">
Front-End
</div>
<div class="conversation-txt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
</div>
<input type="text" placeholder="Enter your message">
</div>
</div>
</body>
</html>
Instead of position:absolute you can rely on a flexbox container where it will be easier to position the input and size it
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 9fr;
}
.directories {
background-color: rgb(17, 200, 110);
}
.chats {
background-color: rgb(220, 220, 120);
height: 100vh;
}
.conversation {
background-color: rgb(220, 20, 120);
padding: 8px;
position: relative;
display:flex; /* added*/
flex-direction:column; /* added*/
}
.conversation-head {
position: sticky;
top: 0;
background-color: white;
}
input {
width: 100%; /* added*/
box-sizing:border-box; /* added*/
height: 32px;
margin:auto 0 5px; /* added*/
}
<div class="wrapper">
<div class="directories">
Something Something
</div>
<div class="chats">
Chat Chat Chat
</div>
<div class="conversation">
<div class="conversation-head">
Front-End
</div>
<div class="conversation-txt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
</div>
<input type="text" placeholder="Enter your message">
</div>
</div>
You should remove the position:absolute of input , the position absolute is relative to the parent(with position relative) and ignore the padding of the parent element
use this
input{
box-sizing: border-box;
left:0;
right:0;
}
hopefully, this is work
I am trying to animate the entrance of new rows of content. I am using keyframes animations so I can later add easing. Why are my animated container's contents not animating?
I would expect the contents of each box in the row that is entering the page to expand or be hidden until enough height is available to show it.
I tried to create a stackoverflow snippet, but here is a codepen that seems to work better. https://codepen.io/AlgeoMA/pen/XgKWMq
$('#addMore').click(() => {
$('.row.last').removeClass('last');
let rowClone = $('.container .row:eq(0)').clone();
rowClone.addClass('animating');
$('.rows').append(rowClone);
})
$('#restart').click(() => {
let rowClone = $('.container .row:eq(0)').clone();
$('.rows .row').remove('.row');
$('.rows').append(rowClone);
})
.container .rows {
position: relative;
}
.container .rows .row {
display: flex;
}
.container .rows .row .block {
display: inline-block;
text-align: center;
border: 1px solid gray;
width: 200px;
height: 230px;
}
.container .rows .row .block .name, .container .rows .row .block button {
margin-top: 20px;
}
.container .rows .row .block img {
width: 90px;
height: 90px;
}
.container .rows .row.animating .block {
animation-duration: 1s;
animation-name: slidein;
}
#keyframes slidein {
from {
max-height: 0;
}
to {
max-height: 230px;
}
}
/* -------------------------------------- mostly just cruft below here ----------------------------------- */
#addMore, #restart {
position: fixed;
top: 50px;
left: 50px;
font-size: 14px;
cursor: pointer;
}
#restart {
top: 100px;
}
.bod {
background-color: lightgray;
}
.container {
display: block;
margin: auto;
width: 800px;
min-height: 1000px;
background-color: white;
}
.other-stuff {
font-size: 20px;
line-height: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bod">
<div class="container">
<button id="addMore">Add row</button>
<button id="restart">reboot</button>
<div class="rows">
<div class="row initial">
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
</div>
</div>
<div class="other-stuff">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus praesentium, tempora totam accusantium temporibus libero. Cupiditate, eveniet, consectetur sequi, esse reiciendis mollitia enim temporibus minima tenetur fuga voluptas quis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora reiciendis enim doloribus, perspiciatis excepturi officiis velit non placeat. Consectetur totam molestias ut aliquam enim vero iure sit ipsam magnam facere.</div>
</div>
</div>
The image, text and button should not escape the border as the new row is expanding
Add overflow: hidden to .block
$('#addMore').click(() => {
$('.row.last').removeClass('last');
let rowClone = $('.container .row:eq(0)').clone();
rowClone.addClass('animating');
$('.rows').append(rowClone);
})
$('#restart').click(() => {
let rowClone = $('.container .row:eq(0)').clone();
$('.rows .row').remove('.row');
$('.rows').append(rowClone);
})
.container .rows {
position: relative;
}
.container .rows .row {
display: flex;
}
.container .rows .row .block {
display: inline-block;
text-align: center;
border: 1px solid gray;
width: 200px;
height: 230px;
}
.container .rows .row .block .name, .container .rows .row .block button {
margin-top: 20px;
}
.container .rows .row .block img {
width: 90px;
height: 90px;
}
.container .rows .row.animating .block {
animation-duration: 1s;
animation-name: slidein;
}
#keyframes slidein {
from {
max-height: 0;
}
to {
max-height: 230px;
}
}
/* -------------------------------------- mostly just cruft below here ----------------------------------- */
#addMore, #restart {
position: fixed;
top: 50px;
left: 50px;
font-size: 14px;
cursor: pointer;
}
#restart {
top: 100px;
}
.bod {
background-color: lightgray;
}
.container {
display: block;
margin: auto;
width: 800px;
min-height: 1000px;
background-color: white;
}
.other-stuff {
font-size: 20px;
line-height: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bod">
<div class="container">
<button id="addMore">Add row</button>
<button id="restart">reboot</button>
<div class="rows">
<div class="row initial">
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
</div>
</div>
<div class="other-stuff">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus praesentium, tempora totam accusantium temporibus libero. Cupiditate, eveniet, consectetur sequi, esse reiciendis mollitia enim temporibus minima tenetur fuga voluptas quis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora reiciendis enim doloribus, perspiciatis excepturi officiis velit non placeat. Consectetur totam molestias ut aliquam enim vero iure sit ipsam magnam facere.</div>
</div>
</div>
I have a containing DIV, that I use as part of my responsive grid. It expands to the maximum width I allow which is 1280px, then margins appear for large devices. Here's my CSS + a bit of Less.
.container
{
margin-left:auto;
margin-right:auto;
max-width:1280px;
padding:0 30px;
width:100%;
&:extend(.clearfix all);
}
However on some occasions I'd like to overflow sideways - lets say I have an background image or colour that needs to be full width. I'm not great at CSS - but is it possible to achieve what I want?
The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.
In this instance you apply the background color to the full width div and you don't need to apply a color to the internal, restricted div.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
.fullwidth {
background: orange;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
/* background: orange; */
min-height: 50px;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
</div>
<div class="fullwidth">
<div class="container">
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
</div>
<div class="container">
<footer></footer>
</div>
However, for some they like a single all encompassing container so if all you are after is a background you could use a pseudo-element like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.mydiv:after {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
z-index: -1;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<footer></footer>
</div>
Support for vw is IE9+ - See http://caniuse.com/#feat=viewport-units
There are cases where actual content is required in the 100% wide div and the container cannot be opened/closed at will (perhaps to retrofit a slider).
In those cases, where the height of the new div is known the same technique can be used to position it as to be 100% viewport wide:
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.myslider {
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<div class="myslider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
<footer></footer>
</div>
JSfiddle Demo
Note: there are instances where 100vw can cause overflow and a horizontal scrollbar might appear. overflow-x:hidden on the <body> can attend to that..it should not be an issue because everything else is still inside the container.
I found this super useful trick by using vw on margins (Source)
Example :
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
Demo :
html,body {
overflow-x: hidden; /* Prevent scrollbar */
}
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
height: 50px;
background: rgba(28, 144, 243, 0.5);
}
.container {
width: 300px;
height: 180px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.5);
}
<div class="container">
<div class="inner-but-full"></div>
</div>
Can I use :
http://caniuse.com/#feat=calc
http://caniuse.com/#feat=viewport-units
<meta charset="UTF-8">
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0;
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style>
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>