我有一个网站,我需要按以下方式设置 div 的尺寸:
width:86%;
height: 80%;
这样,每当屏幕尺寸增大/减小时,div 就会显示正确的尺寸。
目前,宽度工作正常,我可以设置宽度的百分比和 div 调整大小。但是,除非我指定像素数量,否则高度不会,但显然,当屏幕尺寸改变时这不起作用。 (除非有办法解决这个问题)。
我的问题是,为什么高度百分比在这个 div 中不起作用?
我在下面包含了一些代码,我希望它足以让你得到一个好主意。否则,该网站位于此处:
https://mimi-fasi.myshopify.com/ (想法是让中间的 slider 图像适合面板和屏幕,这样就不需要滚动了)
<div id="content">
<div class="flexslider type-header scaled-text-base">
<ul class="slides">
<li class="slide slide-1 flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
<a href="/collections/all">
<img src="//cdn.shopify.com/s/files/1/0727/2709/t/2/assets/slide_1.jpg?155" alt="Slide 1" draggable="false">
<div class="overlay-text posx-left posy-bottom">
<div class="inner">
<h1 class="text-1"><span class="scaled-text" style="font-size: 5.83333333333333%;">Welcome to</span></h1>
<h2 class="text-2"><span class="scaled-text" style="font-size: 5.83333333333333%;">Masonry for Shopify</span></h2>
</div>
</div>
</a>
</li>
</ul>
</div>
CSS:
#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: absolute;
left: 260px;
top: 100px;
}
.flexslider {
position: relative;
zoom: 1;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.flexslider .slides {
overflow: hidden;
zoom: 1;
margin: 0;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
如果我设置高度:100%;在 HTML 开始标记中,它似乎可以工作,只是我的导航栏消失了,我不知道如何找回它。
最佳答案
简答; div 也应该在一个容器中,它应该有一个固定的高度(比如 'height:integerpx' 或 'height:integer%')
因为 width 已经有一个固定宽度的容器,它是浏览器的宽度,但 height 没有。
关于jquery - 以 div 的百分比设置高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28385548/