html - Parent DIV Height to expand based on inner content -


this question has answer here:

i'm trying set height of .background based on number of .slice elements on page. know inner elements being floated left doesn't i'm not sure how solve this.

jsfiddle http://jsfiddle.net/8ryad/

html

<div class="master">      <a id="btn-nav">         <span></span>         <span>menu</span>         <span></span>     </a>      <nav id="main-nav">              <div class="background">                  <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>                 <div class="slice"></div>              </div>      </nav>  </div><!-- end master -->

css

@import url(http://fonts.googleapis.com/css?family=droid+sans);   body {     background: #2980b9;     font-family: 'droid sans', sans-serif; }   #btn-nav {     position:absolute;     left:10px;     top:10px;     width:30px;     height:30px;     display:block;   z-index:1; }  #btn-nav:hover {   cursor:pointer; }  #btn-nav span:nth-child(2) {     top:10px; }  #btn-nav span:nth-child(3) {     top:20px; }  #btn-nav span {     height: 4px;     width: 30px;     background: white;     content: "";     text-indent: -999em;     display:inline-block;     position:absolute;     zoom: 1;     top:0px;     left:0px;     text-align:center;     -webkit-transition: top .3s cubic-bezier(0.165,.84,.44,1);   -webkit-transform: rotate(0deg); }   #btn-nav:hover > span, #btn-nav.open > span  {     top:10px; }  #btn-nav.open > span:nth-child(1) {   -webkit-animation: rotateani .2s .1s forwards, expandani .3s .3s forwards; }  #btn-nav.open > span:nth-child(2) {   -webkit-animation: rotateani .2s .1s forwards, expandani-2 .3s .3s forwards; }  #btn-nav.open > span:nth-child(3) {   -webkit-animation: rotateani .2s .1s forwards, expandani-3 .3s .3s forwards; }   @-webkit-keyframes rotateani {   0% {-webkit-transform: rotate(0deg);}   100% {-webkit-transform: rotate(90deg);} }  @-webkit-keyframes expandani {   0% {left:0;}   100% {left:-10px;} }  @-webkit-keyframes expandani-2 {   0% {left:0;}   100% {left:0px;} }  @-webkit-keyframes expandani-3 {   0% {left:0;}   100% {left:10px;} }   #main-nav {   position:fixed;   left:0;   top:0;   display:block;   width:100%;   height:100%;   z-index:-1; }   .slice {   width:25%;   height:30%;   min-height:30%;   float:left;   background:black;   opacity:0;   -webkit-transition: 1s; }  .background {   position:absolute;   left:0;   top:0;   width:100%;   height:100%;   z-index:-1; }

managed it; deleted layout , started again.

the main thing set overflow hidden on master div , give min-height.

followed answers here: expanding parent <div> height of children

#master {   background: #000;   height: auto;   min-height: 100%;   overflow: hidden;   position: relative;   width: 100%; }  #main-nav {   left: 0;   position: absolute;   top: 0;   display: block;   height: 100%;   position: fixed;   width: 100%;   z-index: -1; }  .slice {   background: #000;   float: left;   height: 33.66%;   opacity: 0;   filter: alpha(opacity=0);   width: 25%;   -webkit-transition: 1s; }

Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more