内容隐藏在固定位置导航栏后面的问题

时间:2018-09-20 19:52:32

标签: css html5 flexbox

最近我一直在学习HTML5 / CSS,还有一点Flexbox。 考虑到这一点,我一直在尝试整理一个响应页面,没有太复杂的地方,该页面在页眉和页脚中都有固定的导航。

[Codepen](https://codepen.io/addycoder/pen/zJeewm)

当视口> 700像素时,我只是强制向下移动73像素,以使其不会隐藏在导航后面。但是<700px,标头显然会扩展,无论我尝试什么,我似乎都无法获得一种干净的解决方案来解决随着标头环绕并变大而无法隐藏内容的问题

牢记这一点(如笔所示),我将位置更改为相对> 700px,并将页边距设为零,这使所有内容都可见,但失去了固定的导航。

关于我哪里出错了的任何想法。它一定很简单。

第一次使用btw,谢谢您的帮助

1 个答案:

答案 0 :(得分:0)

好的,所以我暂时解决了它。上面的笔已更新,看来可以满足我的要求。我有一个媒体查询,允许小于700像素的设备,并且我只是使用了开发工具来计算高度,但前提是这不会真正改变。