CSS - how to overflow from div to full width of screen -
i have containing div, use part of responsive grid. expands maximum width allow 1280px, margins appear large devices. here's css + bit of less.
.container { margin-left:auto; margin-right:auto; max-width:1280px; padding:0 30px; width:100%; &:extend(.clearfix all); } however on occasions i'd overflow sideways - lets have background image or colour needs full width. i'm not great @ css - possible achieve want?
the obvious solution close container...have full width div open new container. title 'container' class...not absolute requirement hold everything @ same time.
in instance apply background color full width div , don't need apply color 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, single encompassing container if after background use pseudo-element 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 vw ie9+ - see http://caniuse.com/#feat=viewport-units
there cases actual content required in 100% wide div , container cannot opened/closed @ (perhaps retrofit slider).
in cases, where height of new div known same technique can used position 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>note: there instances 100vw can cause overflow , horizontal scrollbar might appear. overflow-x:hidden on <body> can attend that..it should not issue because else still inside container.
Comments
Post a Comment