css - 制作一个至少与页面一样高的div

Question

这里是一个包含问题代码的受限码笔:http://codepen.io/Jraghon/pen/YqgKYR

我正在尝试制作一个固定的、移动设备优先的响应式 header 。除了一些尺寸问题外，我一切正常。具体来说，我希望实际保存内容的 div 至少与视口(viewport)一样高减去标题的大小。

我已确保所有 div 的祖先都具有 height: 100%。而且js显示都是正确的高度。但是，dc-container 没有达到应有的高度，我不明白为什么。

---

回答

由于缺乏更好的答案，我使用了这个问题的答案(尽管我希望有一种方法可以让它在没有表格的情况下拉伸(stretch)): Make nested div stretch to 100% of remaining container div height

这是最后的笔:http://codepen.io/Jraghon/pen/pyYojr

Answer 1

问题是你有一个循环定义:

.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 */
}

相反，你应该使用

.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>