html - css: make inner container height 100% with top and bottom margin -

-

i have strange case:

i try make inner container fill parent (height 100% height), result overflowed content in bottom:

enter image description here

but must (100% except margin top , bottom):

enter image description here

code:

<!doctype html> <html>    <head>     <link rel="stylesheet" href="style.css">     <script src="script.js"></script>   </head>    <body>     <div class="main-wrapper">       <aside class="full-nav" action-bar>         </aside>       <section class="wrapper">             <header>             </header>         <div class="content">           <div class="innner-wrapper">             <div class="main-partial">                 <div class="content-wrapper">content</div>             </div>           </div>         </div>       </section>     </div>   </body>  </html>

and plunker (cssit there):

http://plnkr.co/edit/ku7zxk6uezfz86cmfhds?p=preview

(when set absolute position strange width...)

you can calculate height of .content-wrapper , adjust it.

.content-wrapper {    height: calc(100% - 70px); }

output:

adjusted wrapper

/* styles go here */    html,  body {    height: 100%;    min-height: 100%;  }  body {    min-width: 1024px;    font-family: 'open sans', sans-serif;    margin: 0;    padding: 0;    border: 0;  }  .pull-right {    float: left;  }  .pull-left {    float: left;  }  .main-wrapper {    width: 100%;    height: 100%;  }  aside {    width: 48px;    height: 100%;    float: left;    background: #dedede;    position: absolute;  }  aside.full-nav {    width: 168px;  }  section.wrapper {    width: 100%;    height: 100%;    float: left;    padding-left: 168px;    background: #eeeeee;  }  section.wrapper.full-size {    padding-left: 48px;  }  aside ul.full-width {    width: 100%;    list-style-type: none;  }  aside nav ul li {    height: 34px;  }  aside nav ul li:hover {    opacity: 0.9;  }  aside.full-nav nav ul li.company-name {    width: 100%;    height: 80px;    background: #717cba;    position: relative;  }  aside.full-nav nav ul li.company-name span {    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;  }  aside nav ul li {    height: 34px;    line-height: 1;    max-height: 34px;    font-size: 14px;    font-weight: 400;    color: #ffffff;    margin: 5px 0 0 12px;    text-decoration: none;    display: block;  }  aside.full-nav nav ul li a.first {    margin: 20px 0 0 12px;    text-decoration: none;  }  aside nav ul li a:hover {    color: #ffffff;  }  aside nav ul li.company-name .nav-company-overflow {    display: none;  }  aside nav ul li.company-name .nav-company-logo {    display: none;  }  aside.full-nav nav ul li.company-name {    height: 16px;    color: #ffffff;    margin: 10px 0 0 12px;    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);    position: absolute;    z-index: 20;  }  aside.full-nav nav ul li.company-name .nav-company-overflow {    width: 168px;    height: 80px;    position: absolute;    top: 0;    background: rgba(78, 91, 169, 0.8);    z-index: 15;    display: block;  }  aside.full-nav nav ul li.company-name .nav-company-logo {    width: 168px;    height: 80px;    position: absolute;    top: 0;    z-index: 10;    display: block;  }  aside nav ul li em {    line-height: 100%;    display: inline-block;    vertical-align: middle;    margin: 0 18px 0 0;  }  aside nav ul li span {    width: 110px;    display: inline-block;    line-height: 100%;    vertical-align: middle;    max-width: 110px;  }  aside nav ul li a.profile em {    width: 18px;    height: 18px;    background: url(../images/png/profile_spritesheet.png);    background-position: -10px -676px;    margin: 6px 8px 0 0;  }  aside.full-nav nav ul li a.profile em {    margin: 0 8px 0 0;  }  aside nav ul li a.contacts em {    width: 20px;    height: 20px;    background: url(../images/png/profile_spritesheet.png);    background-position: -10px -224px;  }  aside nav ul li a.events em {    width: 20px;    height: 22px;    background: url(../images/png/profile_spritesheet.png);    background-position: -10px -268px;  }  aside nav ul li a.policy em {    width: 20px;    height: 23px;    background: url(../images/png/profile_spritesheet.png);    background-position: -10px -310px;  }  aside nav ul li a.admins em {    width: 18px;    height: 18px;    background: url(../images/png/profile_spritesheet.png);    background-position: -10px -676px;  }  aside.full-nav nav ul li span {    display: inline-block;  }  aside nav ul li span {    display: none;  }  aside .hide-sidebar {    width: 100%;    height: 34px;    background: #455095;    position: absolute;    bottom: 0;  }  #hide-sidebar-btn {    width: 30px;    height: 34px;    line-height: 40px;    background: #394485;    float: right;    text-align: center;  }  #hide-sidebar-btn:hover {    cursor: pointer;  }  aside .collapse-btn-icon {    width: 8px;    height: 15px;    display: inline-block;    background: url(../images/png/profile_spritesheet.png);    background-position: -10px -353px;    -webkit-transform: rotate(180deg);    transform: rotate(180deg);  }  aside.full-nav .collapse-btn-icon {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }  .innner-wrapper {    height: 100%;    margin: 0 12px 0 12px;  }  .main-partial {    height: 100%;  }  header {    height: 40px;    background: #ffffff;    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);  }  header .buttons-header-area {    float: right;  }  header .company-header-avatar {    width: 28px;    height: 28px;    -webkit-border-radius: 28px;    -webkit-background-clip: padding-box;    -moz-border-radius: 28px;    -moz-background-clip: padding;    border-radius: 28px;    background-clip: padding-box;    margin: 7px 0 0 5px;    float: left;  }  header .info {    height: 40px;    line-height: 40px;    margin: 0 5px 0 0;  }  header .info em {    width: 28px;    height: 28px;    display: inline-block;    vertical-align: middle;    background: url(../images/png/profile_spritesheet.png);    background-position: -10px -53px;  }  header .dropdown-toggle {    width: 170px;    height: 40px;    border: none;    padding: 0;    background: transparent;    font-size: 12px;    color: #444444;  }  header .btn-group {    height: 40px;    vertical-align: top;  }  header .btn-group.open {    background: #eeeeee;  }  header .open > .dropdown-menu {    width: 170px;    font-size: 12px;    border-color: #d9d9d9;    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.11);    margin: 2px 0 0 0;  }  header .dropdown-toggle:hover {    background: #eeeeee;  }  header .profile-name {    width: 100px;    height: 40px;    line-height: 40px;    display: inline-block;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;  }  header .caret {    height: 40px;    border-top: 6px solid #bfbfbf;    border-right: 6px solid transparent;    border-left: 6px solid transparent;  }  .content {    height: 100%;    margin: 12px 0;    overflow: hidden;  }  .content-wrapper {    background: #ffffff none repeat scroll 0 0;    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);    height: calc(100% - 70px);    width: 100%;  }  .content-row.company {    height: 300px;  }  .content-row-wrapper {    margin: 0 18px;  }
<!doctype html>  <html>    <head>    <link rel="stylesheet" href="style.css">    <script src="script.js"></script>  </head>    <body>    <div class="main-wrapper">      <aside class="full-nav" action-bar>      </aside>      <section class="wrapper">        <header>        </header>        <div class="content">          <div class="innner-wrapper">            <div class="main-partial">              <div class="content-wrapper">content</div>            </div>          </div>        </div>      </section>    </div>  </body>    </html>


Comments

Post a Comment

Popular posts from this blog

c# - Better 64-bit byte array hash -

-
i need hash algorithm produces 64-bit hash code ( long ) fewer collisions string.gethashcode() , fast (no expensive calls cryptographic functions). here's implementation of fnv still shows 3% of collisions after testing 2 million random strings. need number way lower. void main() { const string chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!#@$%^&*()_+}{\":?><,./;'[]0123456789\\"; const int n = 2000000; var random = new random(); var hashes = new hashset<long>(); int collisions = 0; for(int = 0; < n; i++) { var len = random.next(chars.length); var str = new char[len]; (int j = 0; j < len; j++) { str[j] = chars[random.next(chars.length)]; } var s = new string(str); if(!hashes.add(get64bithash( s ))) collisions++; } console.writeline("collision percentage after " + n + " random strings: " + ((doubl
Read more

webrtc - Which ICE candidate am I using and why? -

-
[questions in bold below] i have setup kurento media server 5.1.3 in datacenter behind firewall running os ubuntu 14.04. has 2 network cards: 222.222.222.222 (eth0 - private ip) 111.111.111.111 (eth1 - public ip) attached below sdp (setremotedescription) when browser connected kurento media server type: answer, sdp: v=0 o=- 5487318114793304426 0 in ip4 0.0.0.0 s=kurento media server c=in ip4 0.0.0.0 t=0 0 a=group:bundle audio video m=audio 59068 rtp/savpf 111 0 c=in ip4 111.111.111.111 a=rtpmap:111 opus/48000/2 a=rtpmap:0 pcmu/8000 a=sendrecv a=rtcp:59068 in ip4 111.111.111.111 a=rtcp-mux a=ssrc:669011897 cname:user39019747@host-6e83e4c2 a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time a=mid:audio b=as:20 a=ice-ufrag:ymdk a=ice-pwd:lylifk5ueqzpwm91ddj37e a=fingerprint:sha-256 ff:0f:81:8c:41:4e:b4:b6:c6:d8:36:f3:d6:5f:09:fd:5f:af:13:b3:9d:fc:12:66:ac:f3:56:d6:5b:0a:73:5d a=candidate:1 1 udp 2013266431 111.111.111.111 55239 typ host a=candidate:2 1 udp
Read more

php - Zend Framework / Skeleton-Application / Composer install issue -

-
i trying create zend framework application using skeleton in netbeans. when run composer install, following error message: "c:\php\php.exe" "c:\composer\composer.phar" "--ansi" "--no-interaction" "update" "--dev" using deprecated option "dev". dev packages installed default now. loading composer repositories package information updating dependencies (including require-dev) requirements not resolved installable set of packages. problem 1 - package requires php >=5.5 php version (5.4.42) not satisfy requirement. problem 2 - installation request zendframework/zendframework 2.5.1 -> satisfiable zendframework/zendframework[2.5.1]. - zendframework/zendframework 2.5.1 requires php >=5.5 -> php version (5.4.42) not satisfy requirement. done. apparently, zend framework only needs php 5.3+ contradicts above. need use php 5.4. my composer.json following: { "name": "
Read more