11

I've pasted the code below. It appears that the addition of the title element causes content to be cut-off from the bottom of the scroll. If I remove the title element, no content is cut off. The title shuffles down and impacts the next element.

Screenshot here

HTML

<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some long content here...
  </div>
</div>

CSS

.wrapper {
  border: 0;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  color: white;
  padding: 5px 0;
  position: relative;
  margin: 0;
  background: #000;
}

.content {
  overflow-y: auto;
  height: 100%;
}

If a box shadow and border radius is added to the wrapper element, this causes further strange behaviour (if overflow hidden removed from wrapper as well).

with box shadow and border radius

Improve this question
4
  • what do want to achieve ? Commented Jul 5, 2020 at 18:43
  • what is the problem ? Commented Jul 5, 2020 at 18:43
  • @Niteesh Look at the screenshot. The last line is cutted-off. Commented Jul 5, 2020 at 18:45
  • @Niteesh I want to solve the scroll issue. The screenshot image shows that although the scrollbar is at the bottom, the content is not visible. Commented Jul 5, 2020 at 18:46

5 Answers 5

Reset to default
5

The error occur because you are setting content height as 100% , so it takes the height of it's parent wrapper, but wrapper also contains titile div which occupies some area of 100% height, so the scrollbar scrolls for the height : (wrapper- height of title). So, try this :

.content {
  overflow-y: auto;
  height: calc(100% - 30px);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

@aprilone the error occur because you are setting content height as 100% , so it takes the height of it's parent wrapper, but wrapper also contains titile div which occupies some area of 100% height, so the scrollbar scrolls for the height : (wrapper- height of title)
Please, don't use comments to complete the answer, just edit it! ;-)
0 
  overflow-y: scroll;
  height: 100%;
}

Change overflow-y to scroll

Improve this answer

Comments

0

The overflow of .wrapper is hidden so it cuts off the content of children content. Simply remove the overflow:hidden and it will behave as you want.

Code snippet:

.wrapper {
  border: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  color: white;
  padding: 5px 0;
  position: relative;
  margin: 0;
  background: #000;
}

.content {
  overflow-y: auto;
  line-height: normal;
  height: 100%;
}
<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...
  </div>
</div>

If you for some reason can't delete overflow: hidden you can calculate the height of content using calc so it won't be cutted off.

Code snippet (using calc):

.wrapper {
  border: 0;
  position: fixed;
  overflow: hidden;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  color: white;
  padding: 5px 0;
  position: relative;
  margin: 0;
  background: #000;
}

.content {
  overflow-y: auto;
  line-height: normal;
  height: calc(100% - 26px);
}
<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...
  </div>
</div>

Improve this answer

3 Comments

This looks like the correct answer. Although, if I do some further styling with border radius and box shadow on the wrapper, there are no rounded corners and the box-shadow falls short of the bottom.
What do you mean? Can you send a screenshot? I will update my answer if you can't delete overflow: hidden. But I don't recommend my second solution, try to avoid using calc if it is possible.
I have added a second screenshot to the original post.
0

Well, height: 100%; on the .content plus the height of the .title element will be cut off in a parent that hides overflow and is 100% high - just because 100% plus anything else adds up to more than 100% => causing an overflow, which will be cut off due to overflow: hidden.

Improve this answer

Comments

0

Because you add hidden in main container, Add scroll in main container.

.wrapper {
  border: 0;
  overflow: scroll; /* change it */
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.