我有一个在一侧上带有按钮的webapp。当我单击其中一个按钮* JavaScript magic *时,旁边会出现一个菜单。该脚本对位置或样式一无所知,它只是找到一个目标元素,然后在其中编写HTML。
简而言之,我有一个相对于其父菜单定位的菜单(在此示例中为#pretty-target
)。
<div class="container">
<button class="my-pretty-button">@</button>
<div class="menu-target" id="pretty-target"></div>
</div>
结果看起来像这样:
现在,当我减小页面高度时,我想根据其距页面底部的距离来限制此菜单的高度。比理想的结果看起来像这样:
我知道最好的做法是拥有一个可滚动的页面主体,而不必理会这些元素的高度。但是,我的页面主体是一张 map ,因此任何滚动它的尝试都只会移动 map 。
我当然可以通过使用可滚动的覆盖图,或者甚至更好的是,通过使用媒体查询来选择一种更好的显示这些菜单的方法,来制作一些替代商品。但是,它们不会以这种方式显示。
简要地说:我有一个与页面无关的div,我希望它的高度受页面高度的限制。如何工作(不使用JS)?
最佳答案
如果您以现代浏览器为目标,则可以使用 calc
和 vh
实现您的目标。
如果需要将按钮放置在屏幕中间,只需从max-height
的.popup
中减去按钮的位置即可。
.wrapper {
position: absolute;
top: 80px; /*the position of your floating button*/
right: 50px;
}
.button {
display: block;
width: 50px;
padding: 10px;
float: right;
box-sizing: border-box;
text-align: center;
border: 1px solid red;
}
.popup {
position: absolute;
max-height: calc(100vh - 50px - 80px); /*modify the value to fit your needs, 80px is the position of your floating button*/
overflow-y: scroll;
width: 100px;
padding: 10px;
right: 55px;
top: 0;
border: 1px solid blue;
}
<div class="wrapper">
<span class="button">Star</span>
<div class="popup">
<p>Option 1</p>
<p>Option 2</p>
<p>Option 3</p>
<p>Option 4</p>
<p>Option 5</p>
<p>Option 6</p>
<p>Option 7</p>
<p>Option 8</p>
<p>Option 9</p>
</div>
</div>
关于css - 限制高度与离页面底部的距离,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45990219/