2

I got a fixed wrapper (to cover the background) and an inner div (to hold text/divs). Inside the inner div I've got some divs and text.

html,
body {
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #F60;
  z-index: 2;
}
.inner {
  background-color: rgba(29, 29, 29, 0.95);
  color: #fff;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class="wrapper">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.</div>
</div>

My question is: When the screen height is shorter than the text height the user can not see all text. How can I keep the background fixed and make the text div moveable so the user can view everything which is in the inner div (e.g. text, divs)? Basically I want the user to be able to read see the full inner div (scrolling) while have the background wrapper fixed on the background.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Becky
  • 5,467
  • 9
  • 40
  • 73

2 Answers2

3

I'd suggest giving the inner element a max-height of 100%, then adding overflow: auto to conditionally add a scrollbar.

Updated Example

.inner {
    /* ... */
    max-height: 100%;
    overflow: auto;
}


html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #F60;
  z-index: 2;
}
.inner {
  background-color: rgba(29, 29, 29, 0.95);
  color: #fff;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-height: 100%;
  overflow: auto;
}
<div class="wrapper">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.</div>
</div>
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
0

I don't know if I get your question right but here some changes on the CSS:

.wrapper {
    width: 100%;
    height: 100%;
    background-color: #F60;
    z-index: 2;
    position: relative;
}
.ABC {
    background-color: rgba(29, 29, 29, 0.95);
    color: #FFF;
    top: calc(50% - 50px);
    height: 20px;
    position: relative;
    width: 100%;
    overflow-y: scroll;
    min-height: 100px;
}
Elow
  • 597
  • 3
  • 9