0

Here is a restricted code pen containing the problem code: http://codepen.io/Jraghon/pen/YqgKYR

I'm trying to make a fixed, mobile-first, resonsive header. I have everything working, except for some sizing issues. Specifically, I want the div that actually holds the content to be at least as high as the viewport minus the size of the header.

I have ensured that all of the div's ancestors have height: 100%. Moreover, js shows that they are all the correct height. However, the dc-container is not as tall as it should be, and I can't figure out why.

Answer

For lack of a better answer, I am using the answer from this question (although I wish there were a way to make it stretch without tables): Make nested div stretch to 100% of remaining container div height

Here is the final pen: http://codepen.io/Jraghon/pen/pyYojr

Community
  • 1
  • 1
Kittsil
  • 2,349
  • 13
  • 22

2 Answers2

1

You can use viewport sizes. vw means viewport width, and vh viewport height:

.selector {
    height: 100vh; /** 100% of viewport height **/
}

You can use calc() to substract the height of the header:

.header {
    height: 50px;
}
.selector {
    height: calc(100vh - 50px); /** 100% of viewport height - 50 px header height **/
}
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • I cannot use viewport sizes, as it is not yet compatible with many current browsers. I am using calc() in my pen, but, as shown, that is not helping. – Kittsil May 10 '16 at 09:39
  • It's compatible with **all** current browsers. The only browser that doesn't have support with `vh` is IE8, and it's **not a current browser** – Marcos Pérez Gude May 10 '16 at 09:59
  • http://caniuse.com/#feat=viewport-units It is not supported by Opera Mini, and has problems in many other browsers. – Kittsil May 10 '16 at 10:01
  • No, no and no. Partial support in IE and Edge reffers to the `vmax`unit, that isn't in my answer. I answer you with a `vh`. Opera Mini usage: 0.11% .... The problems in iOS is with iOS 7 (we are in iOS 9.3). However, if you don't want to use this freaking awesome units, your only solution is javascript (you tag this question as CSS) – Marcos Pérez Gude May 10 '16 at 10:04
  • Ok, you don't know the behaviour of this community. We answer globally to help more users than you with a single question. That's the use of this site. My answer is not a bad answer, but I don't have more motivation to help you. Good luck. And YES, I see your codepen. And NO, your question is not a good question (according with the help center), and I DON'T DOWNVOTE YOU. – Marcos Pérez Gude May 10 '16 at 10:12
1

The problem is that you have a circular definition:

.site-content {
  min-height: calc(100% - 66px);
  height: auto; /* Depends on contents */
}
.site-content > .dc-container {
  height: 100%; /* Depends on parent */
  min-height: 100%; /* Depends on parent */
}

Instead, you should use

.site-content {
  height: calc(100% - 66px);
}
.site-content > .dc-container {
  height: auto;
  min-height: 100%;
}


$(document).ready(function() {
  $('#header__icon').click(function(e) {
    e.preventDefault();
    $('body').toggleClass('with--sidebar');
    gooo();
  });

  $('#site-cache').click(function(e) {
    $('body').removeClass('with--sidebar');
    gooo();
  });
});

function gooo() {
  $('.x0').html('html x: ' + $('html').outerWidth());
  $('.x1').html('html y: ' + $('html').outerHeight());
  $('.x2').html('body x: ' + $('body').outerWidth());
  $('.x3').html('body y: ' + $('body').outerHeight());
  $('.x4').html('site-container x: ' + $('.site-container').outerWidth());
  $('.x5').html('site-container y: ' + $('.site-container').outerHeight());
  $('.x6').html('site-pusher x: ' + $('.site-pusher').outerWidth());
  $('.x7').html('site-pusher y: ' + $('.site-pusher').outerHeight());
  $('.x8').html('header dc-container x: ' + $('.header .dc-container').outerWidth());
  $('.x9').html('header dc-container y: ' + $('.header .dc-container').outerHeight());
  $('.x10').html('site-content x: ' + $('.site-content').outerWidth());
  $('.x11').html('site-content y: ' + $('.site-content').outerHeight());
  $('.x12').html('content dc-container x: ' + $('.site-content .dc-container').outerWidth());
  $('.x13').html('content dc-container y: ' + $('.site-content .dc-container').outerHeight());
}

$(function() {
  $(window).resize(gooo).trigger('resize');
});
/* VARIABLES */

html,
body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.site-container {
  height: 100%;
}
.site-pusher {
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.dc-container {
  overflow: hidden;
  *zoom: 1;
  margin: auto;
  width: 100%;
  max-width: 960px;
  height: 100%;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 66px;
  line-height: 66px;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.header .dc-container {
  color: #fff;
  background-color: #0288D1;
}
.site-content {
  margin-top: 66px;
  height: calc(100% - 66px);
}
.site-content .dc-container {
  height: auto;
  min-height: 100%;
  background-color: #B3E5FC;
}
.header__logo {
  color: #fff;
  font-weight: 700;
  padding: 0 25px;
  float: left;
}
.menu {
  position: fixed;
  left: -250px;
  top: 0;
  bottom: 0;
  width: 250px;
  background-color: #0277BD;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.menu a {
  padding: 0 10px;
  color: #fff;
  height: 40px;
  text-align: center;
  line-height: 40px;
  display: block;
  border-bottom: 1px solid #0288D1;
}
.menu a:hover {
  color: #B3E5FC;
}
.header__icon {
  position: relative;
  display: block;
  float: left;
  width: 50px;
  height: 66px;
  cursor: pointer;
}
.header__icon:after {
  content: '';
  position: absolute;
  display: block;
  width: 1rem;
  height: 0;
  top: 26px;
  left: 15px;
  -moz-box-shadow: 0 0px 0 1px #fff, 0 6px 0 1px #fff, 0 12px 0 1px #fff;
  -webkit-box-shadow: 0 0px 0 1px #fff, 0 6px 0 1px #fff, 0 12px 0 1px #fff;
  box-shadow: 0 0px 0 1px #fff, 0 6px 0 1px #fff, 0 12px 0 1px #fff;
}
.site-cache {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.with--sidebar {
  overflow: hidden;
}
.with--sidebar .header,
.with--sidebar .site-pusher {
  left: 250px;
  right: -250px;
}
.with--sidebar .menu {
  left: 0;
}
.with--sidebar .site-cache {
  right: 0;
  left: 250px;
}
<div class="site-container">
  <div class="site-pusher">
    <header class="header">
      <div class="dc-container">
        <a href="#" class="header__icon" id="header__icon"></a>
        <a href='#' class="header__logo" id='header__logo'><b>LOGO</b></a>
        <nav class="menu">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Blog</a>
          <a href="#">Contact</a>
        </nav>
      </div>
    </header>
    <div class="site-content">
      <div class="dc-container">
        <div class="x0"></div>
        <div class="x1"></div>
        <br>
        <div class="x2"></div>
        <div class="x3"></div>
        <br>
        <div class="x4"></div>
        <div class="x5"></div>
        <br>
        <div class="x6"></div>
        <div class="x7"></div>
        <br>
        <div class="x8"></div>
        <div class="x9"></div>
        <br>
        <div class="x10"></div>
        <div class="x11"></div>
        <br>
        <div class="x12"></div>
        <div class="x13"></div>
      </div>
      <!-- END container -->
    </div>
    <!-- END site-content -->
    <div class="site-cache" id="site-cache"></div>
  </div>
  <!-- END site-pusher -->
</div>
<!-- END site-container -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • This is again a good answer, except that now, when there is overflow, I am scrolling in the body; this breaks the auto-hide feature of Android's browser bar. I designed this code specifically to avoid that (from the original pen http://codepen.io/hanlinC/pen/dJwil). – Kittsil May 10 '16 at 10:04
  • You want to scroll in the body but have a sticky bar? That seems wrong. – Oriol May 10 '16 at 10:08
  • I do not want a sticky footer; only a sticky header. Yes, I want to scroll the entire page (avoid `overflow-y: scroll` if at all possible). – Kittsil May 10 '16 at 10:09