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

Question

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

我注意到，如果我减少视口的高度，我的侧边栏的底部区域（带有电子邮件订阅字段的区域）与我的网站导航重叠。

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

我尝试为min-height:700px标记和overflow-y:auto设置BODY和.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;
    }
}

Answer 2

这里的答案就是你提到它不起作用的答案 - 为某个元素设置正确的最小高度。但是您必须定位包含导航和电子邮件订阅的元素。如果你将它设置为该元素而不是它应该工作，除非你使用某种奇怪的东西会覆盖它的最小高度（我可以想象javascript会很容易做到这种东西）。

如果您需要更多帮助，请分享相应的代码，我们可以解决错误。

Answer 3

如果添加“overflow-y：auto;”根据你的<div id="navbar" class="navbar">行的样式（而不是包围它的框滚动），如果窗口不够高，无法显示导航栏，则会出现滚动条。但是，该区域的页脚部分仍会覆盖滚动区域的下半部分。您是否有理由将注册和注册分开？导航的版权部分？如果你把它作为导航的一部分那么它应该只是滚动区域的一部分而没有重叠。