分高度%

时间:2017-10-06 07:18:17

标签: jquery html css

我的divs高度有问题。我将此值设置为%。 Divs父高在js中设置,窗口高度为100% - 导航栏高度。

一切都很好但是当我点击例如CTRL +' - '有些人崩溃了。

我该如何解决?

我附上截图以了解正在发生的事情。

当放大浏览器为100%时: enter image description here

当放大浏览器为90%时: enter image description here



var onResize = function() {

  var windowWidth = window.innerWidth;
if (windowWidth >= 992) {
// Set height for full-height-inner
   if ($('.full-height-inner').length > 0) {
  var windowHeight = window.innerHeight;
//var navbarHeight = $('#navbar-wrapper').outerHeight();
  var navbarHeight = '79px';
  $('.full-height-inner').css('height', (windowHeight - navbarHeight));
}
} else {
// Reset height for full-height-inner
   if ($('.full-height-inner').length > 0) {
  $('.full-height-inner').css('height', 'auto');
}
}
};

$(document).ready(function() {
// Events when window resize
        $(window).on('resize', function() {
onResize();
});

// Events when window is loaded
        $(window).on('load', function() {
onResize();
});
});

<link href="http://imd.imd.com.pl/css/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="full-height w-100 fl relative">
<div class="full-height-inner dt-md w-100">
	<div class="right dtc-md w-100 w-50-md fl fn-md relative v-top-md">
		<div class="gallery w-100 fl relative">
			<div class="gallery-item fl relative cf">
				<a href="#" class="w-100 fl">
					<figure class="gallery-photo w-100 pa0 fl ma0 relative">
						<img src="#" class="db mw-100 mw-none-md">
						<figcaption class="photo-description w-100 absolute">
							<div class="photo-description-inner w-100 tc ph4 absolute">
								<h3 class="mv0"><span>Title</span></h3>
								<p class="mt2 mb0"><span>Description</span></p>
							</div>
						</figcaption>
					</figure>
				</a>
			</div>
			<div class="gallery-item fl relative cf">
				<a href="#" class="w-100 fl">
					<figure class="gallery-photo w-100 pa0 fl ma0 relative">
						<img src="#" class="db mw-100 mw-none-md">
						<figcaption class="photo-description w-100 absolute">
							<div class="photo-description-inner w-100 tc ph4 absolute">
								<h3 class="mv0"><span>Title</span></h3>
								<p class="mt2 mb0"><span>Description</span></p>
							</div>
						</figcaption>
					</figure>
				</a>
			</div>
			<div class="gallery-item fl relative cf">
				<a href="#" class="w-100 fl">
					<figure class="gallery-photo w-100 pa0 fl ma0 relative">
						<img src="#" class="db mw-100 mw-none-md">
						<figcaption class="photo-description w-100 absolute">
							<div class="photo-description-inner w-100 tc ph4 absolute">
								<h3 class="mv0"><span>Title</span></h3>
								<p class="mt2 mb0"><span>Description</span></p>
							</div>
						</figcaption>
					</figure>
				</a>
			</div>
			<div class="gallery-item fl relative cf">
				<a href="#" class="w-100 fl">
					<figure class="gallery-photo w-100 pa0 fl ma0 relative">
						<img src="#" class="db mw-100 mw-none-md">
						<figcaption class="photo-description w-100 absolute">
							<div class="photo-description-inner w-100 tc ph4 absolute">
								<h3 class="mv0"><span>Title</span></h3>
								<p class="mt2 mb0"><span>Description</span></p>
							</div>
						</figcaption>
					</figure>
				</a>
			</div>
			<div class="gallery-item fl relative cf">
				<a href="#" class="w-100 fl">
					<figure class="gallery-photo w-100 pa0 fl ma0 relative">
						<img src="#" class="db mw-100 mw-none-md">
						<figcaption class="photo-description w-100 absolute">
							<div class="photo-description-inner w-100 tc ph4 absolute">
								<h3 class="mv0"><span>Title</span></h3>
								<p class="mt2 mb0"><span>Description</span></p>
							</div>
						</figcaption>
					</figure>
				</a>
			</div>
			<div class="gallery-item fl relative cf">
				<a href="#" class="w-100 fl">
					<figure class="gallery-photo w-100 pa0 fl ma0 relative">
						<img src="#" class="db mw-100 mw-none-md">
						<figcaption class="photo-description w-100 absolute">
							<div class="photo-description-inner w-100 tc ph4 absolute">
								<h3 class="mv0"><span>Title</span></h3>
								<p class="mt2 mb0"><span>Description</span></p>
							</div>
						</figcaption>
					</figure>
				</a>
			</div>
			<div class="gallery-item fl relative cf">
				<a href="#" class="w-100 fl">
					<figure class="gallery-photo w-100 pa0 fl ma0 relative">
						<img src="#" class="db mw-100 mw-none-md">
						<figcaption class="photo-description w-100 absolute">
							<div class="photo-description-inner w-100 tc ph4 absolute">
								<h3 class="mv0"><span>Title</span></h3>
								<p class="mt2 mb0"><span>Description</span></p>
							</div>
						</figcaption>
					</figure>
				</a>
			</div>
			<div class="gallery-item fl relative cf">
				<a href="#" class="w-100 fl">
					<figure class="gallery-photo w-100 pa0 fl ma0 relative">
						<img src="#" class="db mw-100 mw-none-md">
						<figcaption class="photo-description w-100 absolute">
							<div class="photo-description-inner w-100 tc ph4 absolute">
								<h3 class="mv0"><span>Title</span></h3>
								<p class="mt2 mb0"><span>Description</span></p>
							</div>
						</figcaption>
					</figure>
				</a>
			</div>
		</div>
	</div>
</div>
</section>
&#13;
&#13;
&#13;

0 个答案:

没有答案
相关问题