html - 调整窗口大小隐藏了我的导航侧边栏

标签 html css

我有一个网站。它非常简单,只是中间的一列文本和左侧的导航栏,其中包含指向我的页面的链接。当我在我的网站上调整浏览器窗口大小时,缩小窗口会导致文本栏覆盖导航栏。虽然这在具有宽屏显示器和高分辨率的计算机上不是问题,但对于某些人来说是个问题,他们加载页面并发现由于窗口的大小文本栏已经覆盖了导航栏。如何在调整窗口大小时使导航栏随文本栏一起移动,而不是根本不移动并在调整窗口大小时被遮盖?

链接在一个 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/

相关文章:

java - 通过按下按钮 Javafx 更改背景图像

html - 具有 8 个相同尺寸输入的 100% 宽度容器

javascript - 单击 anchor ,在同一窗口中下载文档

c# - 如何获取表行中的所有 HtmlInputText 控件?

javascript - 应用转换后如何获得结果路径字符串?

html - 标题/标题

javascript - 使用 JavaScript 或 jQuery 在 JSP 中实现动态年历

jquery - 我怎样才能让我的 qtip 自己决定左或右提示属性

html - 使用两个表显示溢出的表

php - 如何通过单击 PHP 中的按钮来浏览文件并显示其内容?