Question

以下是包含问题代码的限制代码笔：http://codepen.io/Jraghon/pen/YqgKYR

我正在尝试制作一个固定的，移动优先的，无条件的标头。我有一切工作，除了一些尺寸问题。具体来说，我希望实际保存内容的div至少与视口减去标题大小一样高。

我确保所有div的祖先都有height: 100%。而且，js表明它们都是正确的高度。但是，dc-container并不像它应该的那么高，我无法弄清楚原因。

答案

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

这是最后一支笔：http://codepen.io/Jraghon/pen/pyYojr

Answer 1

您可以使用视口大小。 vw表示视口宽度，vh视口高度：

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

您可以使用calc()来减去标题的高度：

.header {
    height: 50px;
}
.selector {
    height: calc(100vh - 50px); /** 100% of viewport height - 50 px header height **/
}

Answer 2

问题在于你有一个循环定义：

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

使div至少与页面一样高

2 个答案: