个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我花了几个小时寻找这个问题的答案，但其他人提供解决方案的场景似乎比我的稍微简单一些。
有没有办法在固定大小的 div 中放置一个 position:fixed 元素，而该元素不会溢出 div？
换句话说，如果固定元素增长，我希望滚动条出现在 div 中(水平和垂直)，但我需要元素在垂直滚动时保持固定(我计划使用 JQuery 来做到这一点)。
提前致谢。
<style>
.container {
width:200px;
height:200px;
border:solid 1px black;
overflow:scroll;
}
.fixed-element {
position: fixed;
width:250px;
height:100px;
background-color:red;
top:10px;
}
p {
min-width: 300px;
}
</style>
<body>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="fixed-element">
</div>
</div>
</body>
编辑:我正在寻找的整体效果就像这里的中间框:http://demo.rickyh.co.uk/css-position-x-and-position-y/除了应用于可滚动的 div 而不是整个视口(viewport)。
最佳答案
所以我想出的办法解决了你的问题，但是当你想滚动时，当你的鼠标悬停在固定框(红色框)上时，你无法滚动。
不太确定这有多重要。
我添加了另一个元素，一个 .holder 并使用 position: absolute; 定位了你的 fixed 元素，因为你只希望它在里面你的 .container
.container {
position: relative;
width:200px;
height:200px;
border:solid 1px black;
overflow: hidden;
}
.fixed {
position: absolute;
width: 250px;
height: 100px;
max-width: 175px;
background-color: rgba(255,0,0,0.5);
top: 10px;
left: 10px;
}
.holder {
width: inherit;
height: inherit;
overflow:scroll;
}
p {
min-width: 300px;
}<div class="container">
<div class="fixed">
This is "fixed"
</div>
<div class="holder">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>对于红框与滚动条重叠的问题，我只能想到如下:
将 max-width 添加到您的 .fixed。我也在代码段中更改了它。
如果您想找出确切的滚动条宽度，因为浏览器之间的宽度不同，您需要使用 Javascript。您可以查看 here on stackover 的答案或 davidwalsch-blog
关于jquery - 位置 :fixed element inside fixed size div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33674009/
28
4
0
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 3年前关闭。 Improve thi
有人知道可以在线使用 FIX 实用程序来验证修复消息吗？即:接受修复消息并检查诸如正文长度和校验和之类的内容。谢谢 最佳答案 https://fixspec.com 上有一个修复日志解码器.当您输入一
在FIX服务器上发送订单请求并更改标签的顺序。 如果我想要输出由我安排的序列(而不是被服务器修改)。 public void send50(Order order) { quickfix.fi
我正在用 C++ 构建一个 FIX 引擎，但我没有引用来了解什么是好的性能数字。考虑到网络时间和 FIX 解析时间，客户端向服务器发送 FIX 消息的最佳时间(以微秒为单位)是多少？还有人知道这个简单
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及
我不明白为什么我的固定背景开始出现，因为它有时没有被固定。 这是一个非常特殊的案例，我知道如何解决它。 您可以删除: .row2 position:relative 或 row1 div -webki
我看过三列的例子(fixed fluid fixed)。但是，我需要一个四列解决方案的示例。 两个外部列是固定的。两个内柱是流动的。 固定 |流体 |流体 |固定 最佳答案 您可以使用 calc .
我试图说服自己输入 Fix和功能 fix是一回事。 但我找不到他们的定义之间的相关性 -- definition of fix fix :: (p -> p) -> p fix f = let {x
这是我已经在这里提出的另一个问题的后续How can I play a single tone or custom wave with Delphi? 长话短说，我使用 MMSystem 的 wave
刚刚完成一个站点并遇到位置问题:已在 IE7 上修复。我用谷歌搜索并尝试了不同的 Doctypes，但固定区域在 IE7 上仍然不在位。 我没有 IE7，但一位客户员工有，我可以使用在线 IE 渲染器
我有我的 设置为 background-attachment: fixed但这留下了我的标签正常滚动。如果我设置 position: fixed到我的标签，它们会跳转到页面顶部。有什么办法可以做与 b
我有一个包含标题页(导航栏)的 php 页面。我想将导航栏显示为固定标题，但每当将其位置更改为固定时，它都会删除滚动条(水平和垂直)并且我无法滚动页面。如果我想保持我的标题固定并且我不想固定位置。我怎
已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是无关紧要的，
我正在使用 jquery mobile，对于页眉/页脚，我使用的是 data-position="fixed"。 但是，当我们滚动页面时......页眉页脚消失并在滚动停止时重新出现.. 有没有一种方
我正在尝试连接到使用 FIX 5.0 的代理 我想利用 quickfixj以方便和快速地实现。 这行吗？我假设 5.0 extends(可以这么说)以前版本的功能，但我不想走得太远，结果导致更多问题，
如何放置 position:fixed内容在页面背景中的容器，而其他内容在其上滚动，同时仍然保持点击背景元素的能力？ 效果类似于前景内容在固定背景上滚动的视差滚动情况，但我希望能够将 HTML 放在背
我尝试将 z-index 设置为 body 下的某些位置为 fixed 的元素 示例如下: HTML menu content ....
我花了几个小时寻找这个问题的答案，但其他人提供解决方案的场景似乎比我的稍微简单一些。 有没有办法在固定大小的 div 中放置一个 position:fixed 元素，而该元素不会溢出 div？ 换句话
此问题已在 SO 和其他地方多次报告，但我找不到任何有效的解决方案。 如果您有固定位置的 div 和固定附加的背景，在某些特定情况下，在 Google Chrome 上呈现会出现错误(在 Firefo
我想在我网站的页面顶部创建一个标题栏，但我在布局方面遇到了问题。以下是我想要的结果: goal http://ambiguities.ca/images/goal.png 这是 html:
我是一名优秀的程序员,十分优秀！