css3 - CSS overflow-y:scroll; missing something -


i have 1 problem css overflow-y:scroll;

i have created demo codepen.io

in demo can see there left sidebar. , inside have 11 .layer div . if scrolling down left sidebar can see 9 layer other 2 layers staying inside.

what problem in css. need fixed ?

css

.container {   -webkit-animation: cardenter 0.75s ease-in-out 0.5s;   animation: cardenter 0.75s ease-in-out 0.5s;   -webkit-animation-fill-mode: both;   animation-fill-mode: both;   display: block;   position: absolute;   height: auto;   bottom: 0;   top: 0;   left: 0;   right: 0;   max-width: 980px;   min-width: 300px;   margin-top: 75px;   margin-bottom: 20px;   margin-right: auto;   margin-left: auto;   background-color: #ffffff;   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);   -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;   border-radius: 3px;   -webkit-border-radius: 3px;   -o-border-radius: 3px;   -moz-border-radius: 3px;   min-height: 140px; } .left{   display: block;   position: absolute;   float: left;   width: 30%;   overflow: hidden;   padding: 0px;   bottom: 0;   top: 0;   left: 0;   background-color: #ffffff;   border-right: 1px solid #d8dbdf;   -webkit-border-top-left-radius: 3px;   -webkit-border-bottom-left-radius: 3px;   -moz-border-radius-topleft: 3px;   -moz-border-radius-bottomleft: 3px;   border-top-left-radius: 3px;   border-bottom-left-radius: 3px;   transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s; } .left-header {   -webkit-box-flex: 0;   -webkit-flex: none;   -ms-flex: none;   flex: none;   background-color: red;   color: #fff;   height: 108px;   position: relative; } .left-list {   z-index: 999 !important;   position: relative;   float: left;   width: 100%;   height: 100%;   overflow: hidden;   background-color: #ffffff;   opacity: 1;   -webkit-animation-duration: 0.9s;   animation-duration: 0.9s;   -webkit-animation-fill-mode: both;   animation-fill-mode: both;   -webkit-animation-name: slideleft;   animation-name: slideleft;   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);   background-color:red; } .list-layers {   position: absolute;   height: 100%;   overflow-y: scroll; } .layer {   float: left;   width: 100%;   padding: 10px;   background-color: #ffffff;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   border-bottom: 1px solid #f7f7f7; }

setting height: 100% sets element's height of it's parent, if there element contained within div not take account. can change this...

.left-list {   position: relative;            width: 100%;   height: 100%; }

to this...

.left-list {   position: absolute;   top: 108px;   bottom: 0; }

and means start 108px top of containing block (or rather closest ancestral non-static element) , end @ bottom of containing block.

(demo)


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more

Website Login Issue developed in magento -

i have website developed using magento . able login. right now, login failed. infact operations interacts user table failing. need know issue. how figure out? first clear try clear log file second make sure have not upgraded magento and 3rd make sure db accessible in magento -harry p
Read more