我有一个网站。它非常简单,只是中间的一列文本和左侧的导航栏,其中包含指向我的页面的链接。当我在我的网站上调整浏览器窗口大小时,缩小窗口会导致文本栏覆盖导航栏。虽然这在具有宽屏显示器和高分辨率的计算机上不是问题,但对于某些人来说是个问题,他们加载页面并发现由于窗口的大小文本栏已经覆盖了导航栏。如何在调整窗口大小时使导航栏随文本栏一起移动,而不是根本不移动并在调整窗口大小时被遮盖?
链接在一个 div 中,文本在不同的 div 中。这是 CSS:
#links {
position: relative;
float: left;
left: 18em;
font-family: arial;
}
#content {
position: relative;
font-family: arial, helvetica;
top: -4em;
width: 560px;
border-style: solid;
border-color: 36a2c1;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
background-color: white;
margin-left: auto;
margin-right: auto;
padding-top: 0em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
}
最佳答案
我猜你的侧边栏菜单是绝对定位的 (css: position: absolute; right: 0;
),这将它从正常的文档流中移除。当窗口缩小时,您无法阻止它滑过其他内容,因为它不再真正“在”文档中。
通常的解决方法是在父容器上设置一个最小宽度,这样它就不会缩小到某个限制以下 (css: min-width: 100px;
)。当然,IE6 和更早的版本根本不支持最小宽度,但是可以解决 1px 高的不可见图像、无法换行的固定宽度内容等...
关于html - 调整窗口大小隐藏了我的导航侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3234084/