Scroll in div if necessary

Asked

Viewed 51,550 times

9

I have the following div on my page 

<div id="divContent" class='content'>
            Bem vindo ao meu site <br />
            1 index index index index index index index index <br />
            2 index index index index index index index index <br />
            3 index index index index index index index index <br />
            4 index index index index index index index index <br />
            5 index index index index index index index index <br />
            6 index index index index index index index index <br />
            7 index index index index index index index index <br />
            8 index index index index index index index index <br />
            9 index index index index index index index index <br />
            10 index index index index index index index index <br />
            11 index index index index index index index index <br />
            12 index index index index index index index index <br />
            13 index index index index index index index index <br />
            14 index index index index index index index index <br />                                
        </div>

Opening the page in the computer browser, all your contents is showoff. But when opening in a cellular for example, the content does not fit on the screen, hiding the last lines of content from DIV.

Is there any way put a scroll only in case of don’t fit the content on smaller screens?

html div rolling

  • Do you say a horizontal scroll? Could you add the css who already owns?

  • uses media query, take a look at my answer, you can detect monitors with smaller resolution and apply css to show scroll.

  • the media query did not work

  • See this Fiddler https://jsfiddle.net/rboschini/05f0pxuc/

  • Remove these br’s ai and add a <p> puts the text with some alignment and sets a media query for low resolutions, if it is plain text or need media query why the browser itself takes care of leaving the text readable.

  • Managed to make??

Show 1 more comment

1 answer

12

Use css to display scroll bars.

#divContent{
 overflow:auto; 
}

With this your div should have scroll whenever you need. There are several options for several cases. See the definition on the W3C.

overflow: visible|hidden|scroll|auto|initial|inherit;

To leave this only for mobile devices, you can use Mediaquery, to detect the resolution and make your changes.

Example:

/* mobile phone */
@media all and (max-width: 768px) {
    #divContent{
     overflow:auto; 
    }
}

This CSS will only be applied in resolutions up to 768px, spanning numerous mobile devices. Look at this jsFiddler with Mediaquery working.

Browser other questions tagged html div rolling

You are not signed in. Login or sign up in order to post.