以下是包含问题代码的限制代码笔:http://codepen.io/Jraghon/pen/YqgKYR
我正在尝试制作一个固定的,移动优先的,无条件的标头。我有一切工作,除了一些尺寸问题。具体来说,我希望实际保存内容的div至少与视口减去标题大小一样高。
我确保所有div的祖先都有height: 100%
。而且,js表明它们都是正确的高度。但是,dc-container
并不像它应该的那么高,我无法弄清楚原因。
答案
由于缺乏更好的答案,我正在使用这个问题的答案(尽管我希望有一种方法可以让它在没有表格的情况下延伸): Make nested div stretch to 100% of remaining container div height
答案 0 :(得分: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 **/
}
答案 1 :(得分: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>