html - 如何为网站设置最小垂直高度？

Question

这是我的网站 - http://www.aspenwebsites.com/majesticpines/about/

我注意到如果我降低视口(viewport)的高度，侧边栏的底部区域(带有电子邮件订阅字段的区域)会与我网站的导航重叠。

我想知道是否有办法为网站设置一些最小高度，这样如果它达到该值，它会在右侧显示滚动条并且不会进一步减少，因此我的电子邮件订阅表单不会'不与导航链接重叠。

我尝试为 BODY 标签和 设置 min-height:700px 和 overflow-y:auto .header-sidebar，但这没有任何区别。

你能告诉我我做错了什么吗？

Answer 1

您可以使用 css 媒体查询。

// The CSS queries inside this @media will applied when the viewport height is lesser than 1001px
@media screen and (max-height: 1000px) {
    // Reduce menu paddings and margins here
    // Example:
    .menu li {
        padding:2px 0;
        margin-top:3px;
        margin-bottom: 3px;
    }
}