html - How to keep scroll-bar hidden and show it when max-height is over? -


i have structure this:

pre {  	word-warp: normal;  	display: block;  	padding: 5px 8px;  	width: auto;  	background-color: #eee;  	margin-bottom: 1em;  	max-height: 300px;  	line-height: 1.8;  	direction: ltr;  	overflow: scroll;  }
<pre>  <code>  in case both x , y scroll-bar(s) has hidden  </code>  </pre>    <hr>    <pre>  <code>  in case y-scroll-bar has appears  <br>  in case y-scroll-bar has appears  <br>  in case y-scroll-bar has appears  <br>  in case y-scroll-bar has appears  <br>  </code>  </pre>    <hr>    <pre>  <code>  in case x-scroll-bar has apears -------------------------------------------------------------------------------------------------------------------  </code>  </pre>

actually i'm trying create stackoverflow-code-method-ui. how can that?

you need set max-width x scrollbar, changeing overflow:scroll overflow:auto works how want.

pre {      word-warp: normal;      display: block;      padding: 5px 8px;      width: auto;      background-color: #eee;      margin-bottom: 1em;      max-height: 300px;      max-width:300px;      line-height: 1.8;      direction: ltr;      overflow: auto;  }
<pre>  <code>  in case both x , y scroll-bar(s) has hidden  </code>  </pre>    <hr>    <pre>  <code>  in case y-scroll-bar has appears  <br>  in case y-scroll-bar has appears  <br>  in case y-scroll-bar has appears  <br>  in case y-scroll-bar has appears  <br>  </code>  </pre>    <hr>    <pre>  <code>  in case x-scroll-bar has apears -------------------------------------------------------------------------------------------------------------------  </code>  </pre>


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -