css - 防止定位到:fixed; div from bunching when window is resized的内容

标签 css html position

希望这不是转载!我到处都看过,如果是的话,我很抱歉。

我有一个 position:fixed 标题 div,它有一些图像链接和一个登录 div。由于 position:fixed 是相对于窗口的,每当我调整窗口大小以测试流动性时,标题 div 中的内容就会卡住并开始下拉页面。

有没有办法让水平滚动条出现并删除空格?我在正文和标题 div 上设置了最小宽度,但没有运气。我目前没有为 IE 编写代码,现在只使用最新的 Chrome 和 Firefox 进行测试。

感谢您的帮助!

CSS:

body {
min-width:1000px;
padding-top:0;
padding-bottom:0;
margin:0;
background-color:#022F00;
}

.container {
padding: 0;
margin-left:auto;
margin-right:auto;
height:100%;
margin-top:160px;
}

.header {
width:inherit;
padding:5px;
position:fixed;
left:20px;
right:20px;
top:15px;;
min-width:850px;
}

.login {
float:right;
padding:0;
margin:0;
border:0;
position:relative;
}
img {
margin:0;
border:0;
padding:0;
}

a {
margin:0;
border:0;
padding:0;
}

HTML:

<body>
<div class="container">
<div class="header" id="titlebar"><img src="title.jpg" /><a href="createaccount.php"><img src="newaccount.jpg"></a><a href="addarticle.php"><img src="newarticle.jpg"></a><a href='myaccount.php' rel=''><img src="myaccount.jpg"></a>
    <div class="login" id="logindiv">content</div>
</div>
</div>
</body>

最佳答案

我找到了这个解决方案,它可能对你有帮助


为您的容器设置最小宽度:

#container { min-width: 1000px;} 

你可能想检查这个链接

Two divs floating left and right: How can I keep them on the same level when a page resizes?

这是一个答案 “左右浮动的两个 div:如何在调整页面大小时将它们保持在同一水平面上?” follow this link

关于css - 防止定位到:fixed; div from bunching when window is resized的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4360633/

相关文章:

html - 如何更改显示样式的CSS

javascript - MVC 在哪里为我们的 cshtml 文件放置 js 引用?

html - 自动调整div的高度

Cocoa:获取鼠标在屏幕上的当前位置

html - 底部定位按钮重叠内容

html - CSS 布局问题(twitter bootstrap)

html - 如何使用 HTML5 和 CSS 3 将按钮放置在一个圆圈周围?

javascript - jquery - 变量(div)内的所有内容

powershell - Powershell v2.0 动态参数可以在位置 0 吗?

javascript - 使用基于视口(viewport)尺寸的 JavaScript 变量来更改 CSS 属性