overflow overlapping padding

Question

overflow overlapping padding

Navigation

#1 by (2 votes)

1

I have a div where I use padding and overflow, but when the overflow is activated and the scroll bar appears, the text goes over the padding area, there is a way to cause the overflow to start from the area initial padding?

link

visualization in practice, where it is written chat chat chat ... put the mouse and scroll down and see that the words will overlap the initial position of the padding link

NOTE: I would like a solution other than creating a new div (in order to reduce the code)

css css3

asked by anonymous 08.02.2016 / 00:52

1 answer

Uncaught exception 'Exception' PHP Element button submitting form. How to disable?

score 2 · Answer 1

I edited your fiddle but as I never moved in it I do not know if the change I made will appear to you.

here the link

What would you do to solve your problem:

I would put the messages in a second internal div, gave the message id of them:

<div id="chat">
<div id="mensagens">

  chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>
  </div>
</div>

and in the css would set the distance with a margin, css stayed like

#chat {
  height: 39vh;
  width: 27.5vw;
  display: block;
  overflow: auto;
  position: fixed;
  top: 55vh;
  left: 21vw;
  background-image: url("http://pre11.deviantart.net/b65d/th/pre/i/2005/076/5/e/frame_by_anilestock.jpg");
  background-size: 100% 100%;
  -margin:auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#mensagens
{
  margin-left:30px;
  margin-top:20px;
  width:120px;
  height:139px;
  overflow:auto;
}