Position Absolute + Scrolling

后端未结

关注

 4  1902

挽巷

With the following HTML and CSS

相关标签:

4条回答

我寻月下人不归

2020-12-07 14:04

I ran into this situation and creating an extra div was impractical. I ended up just setting the full-height div to height: 10000%; overflow: hidden;

Clearly not the cleanest solution, but it works really fast.

0 讨论(0)
发布评论:

提交评论
- 加载中...
醉话见心

2020-12-07 14:17
So gaiour is right, but if you're looking for a full height item that doesn't scroll with the content, but is actually the height of the container, here's the fix. Have a parent with a height that causes overflow, a content container that has a 100% height and overflow: scroll, and a sibling then can be positioned according to the parent size, not the scroll element size. Here is the fiddle: http://jsfiddle.net/M5cTN/196/

and the relevant code:

html:
```
<div class="container">
  <div class="inner">
    Lorem ipsum ...
  </div>
  <div class="full-height"></div>
</div>
```
css:
```
.container{
  height: 256px;
  position: relative;
}
.inner{
  height: 100%;
  overflow: scroll;
}
.full-height{
  position: absolute;
  left: 0;
  width: 20%;
  top: 0;
  height: 100%;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
长发绾君心

2020-12-07 14:25
position: fixed; will solve your issue. As an example, review my implementation of a fixed message area overlay (populated programmatically):
```
#mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}
```
And in the HTML
```
<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>
```
When #data becomes longer tha the sceen, #mess keeps its position on the screen, while #data scrolls under it.
0 讨论(0)
发布评论:

提交评论
- 加载中...

萌比男神i

2020-12-07 14:26

You need to wrap the text in a div element and include the absolutely positioned element inside of it.

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

Css:

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

Setting the inner div's position to relative makes the absolutely position elements inside of it base their position and height on it rather than on the .container div, which has a fixed height. Without the inner, relatively positioned div, the .full-height div will always calculate its dimensions and position based on .container.

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
  float: left;
  margin-right: 16px;
}

.inner {
  position: relative;
  height: auto;
}

.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  height: 100%;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

<div class="container">
  <div class="inner">
    <div class="full-height">
    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    quidem.
  </div>
</div>

http://jsfiddle.net/M5cTN/

0 讨论(0)

热议问题