Question

我花了几个小时寻找答案，但其他人＆＃39;提供解决方案的方案似乎比我的方案略显简单。

有没有办法获得一个位置：固定元素在固定大小的div中，而元素没有溢出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而不是整个视口。

Answer 1

position: fixed仅适用于视口，您无法将元素设置为position: fixed相对于其父级。相反，您可以使用position: absolute来模仿fixed行为。

您可以执行此操作，例如this fiddle节目。

你可以完成＆＃34;伪＆＃34; position: fixed关于与父母相关的元素，通过将两者包裹在父元素和所需元素中来固定＆＃34;固定＆＃34;在另一个容器中。

Here is a fiddle with your code showing the behavior

如果您想阻止元素包装，您可能希望使用white-space属性nowrap;要显示滚动条，请在元素上使用overflow: scroll。

您可以看到该行为in this fiddle或下面的代码段。

＆＃13;

html, body {
    margin: 0;
    padding: 0;
}

.wrap {
    background-color:#ccc;
    position: relative;
}

.a {
    height: 150px;
    overflow-y: scroll;
}

.b {
    margin-top: 300px;
    padding-bottom: 20px;
}

.footer{
    position:absolute;
    bottom:0;
    left:0;
    background-color:#666;
    color:#fff;
    width: 100%;
    white-space: nowrap;
    overflow: scroll;
    padding: 10px 0;
}

＆＃13;

<div class="wrap">
    <div class="a">
        top
        <div class="b">bottom</div>
    </div>
    <div class="footer">Some text Some text Some text Some text Some text Some text AAA text Some text Some text AAAA text Some text Some text Some text Some text Some text Some text </div>
</div>

＆＃13;

Answer 2

position: fixed属性defines the element position related to the page。您应该将父div定义为fixed，将子div定义为relative。

<强> HTML

<div class="parent">
    <div class="child"> ... </div>
</div>

<强> CSS

.parent{
    position: fixed;
    height: 100px;
    overflow-y: scroll;
}

现场演示

https://jsfiddle.net/5tpmzbpo/

Answer 3

所以我提出的解决了你的问题，但是当你想要在鼠标悬停在固定框（红色框）上时滚动，你就无法滚动。

不太确定这是多么重要。

我添加了另一个元素.holder，并将fixed - 元素与position: absolute;对齐，因为您只需要.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

的答案

Answer 4

最后，我采用了不同的方法来解决问题，并将.fixed-element置于.container之外，将其设置为与容器相同的宽度。然后我把它放在它自己的div中，并在div上设置溢出来隐藏。最后，我使用JQuery以编程方式将.fixed-element div与.container一起滚动。感谢所有帮助过的人。

位置：固定尺寸div内的固定元件

4 个答案:

修改