Scrollable DIV Tag - Adding Bacon

Nothing is every truly complete with out bacon right? Here is a simple example where we take some content and apply some CSS to the div container so that only the contents of the div scrolls and not the whole page. Use cases for this could be things like legal terms, a large data grid, or even another web page. In the example case below, we are going use bacon-terms of use. Like most things in web development, this can be done a multitude of ways. This example shows off this feature using only HTML and CSS.

First we will want to set up the div we want to contain the content to be scrolled (I left the content out to show how simple the div is):

<div class="baconTerms">
  <-- insert bacon terms here -->
</div>

Then in our CSS (be it <style> tag or linked CSS file) we will add the following for our div. Note the overflow: auto; attribute/value pair here:

div.baconTerms {
  clear: both;
  height: 300px;
  width: 98%;
  overflow: auto;
  text-align:left;
  border:1px solid silver;
  padding: 5px;
}

Now to present the bacon!

I mean our scrollable div:

Bacon ipsum dolor amet eu irure incididunt prosciutto cupidatat est short loin. Ground round ut pork chop turkey dolore. In veniam nulla mollit fugiat swine boudin spare ribs incididunt sint. Incididunt corned beef ham hock non deserunt picanha jerky sint esse turducken. Ut anim pariatur, landjaeger consequat ham hock sed do chicken ullamco sausage jowl. Shoulder cow pork belly bresaola beef in prosciutto proident. Kevin turkey sausage exercitation, consectetur ham hock consequat eiusmod ullamco frankfurter brisket strip steak pancetta pig.

Meatball bresaola nisi dolore duis. T-bone consectetur veniam kevin occaecat, aliqua ribeye picanha voluptate pork chop aute. Picanha filet mignon ea, minim chuck qui andouille rump veniam shankle tenderloin excepteur. Ipsum ea qui, cillum capicola landjaeger enim anim. Excepteur dolore bacon alcatra cupidatat pork belly.

Turducken quis frankfurter chuck et aute. Short ribs turducken ullamco, aliqua quis pancetta ipsum strip steak sausage laborum. Pariatur swine pork loin sunt sausage duis fugiat. Hamburger dolore doner, officia cillum sint elit aliqua consequat eu esse deserunt. Ex officia adipisicing reprehenderit. Sunt proident ullamco, lorem reprehenderit eiusmod landjaeger veniam salami biltong id meatloaf do strip steak rump. Salami in jowl ullamco deserunt laboris elit filet mignon.Bacon ipsum dolor amet consectetur jowl venison ham in qui. Pig tongue boudin duis kevin. Laborum hamburger cupidatat, corned beef do meatloaf proident pork loin alcatra aliquip nulla biltong. Pork swine aliquip reprehenderit fatback, picanha id veniam non. Pariatur excepteur frankfurter ut voluptate, consectetur bresaola nisi.

Quis strip steak aliquip, rump esse velit filet mignon est. Corned beef venison landjaeger, drumstick commodo est in consectetur pork belly aute ut. Cillum flank tenderloin pariatur. Chicken dolor shoulder exercitation.

Veniam pancetta sausage ex ullamco esse kielbasa salami dolore cupim. Filet mignon dolore nisi, esse pig ribeye flank ham swine. Fugiat dolore adipisicing nisi. Occaecat proident tenderloin veniam alcatra. Beef ribs jerky anim occaecat, officia filet mignon in cillum pork irure ullamco deserunt rump swine enim.

Shank velit cupim do veniam hamburger non salami consectetur pork loin porchetta ball tip bresaola. Ex fugiat deserunt est jerky. Capicola consectetur ham hock magna, ut pastrami sint shank bresaola aliquip kevin non consequat. Pig sirloin veniam culpa tail, tempor hamburger shoulder ham andouille biltong cillum irure jowl bresaola. Tempor irure officia sirloin venison frankfurter eu velit ipsum kielbasa jowl short ribs beef. Excepteur pork jowl in pariatur hamburger shankle sausage laborum flank porchetta t-bone cupim. Sint culpa aliquip, officia drumstick venison pancetta corned beef filet mignon hamburger turducken ipsum.

Excepteur rump mollit esse, nulla do ut alcatra duis aute pork chop kielbasa bacon porchetta short loin. Andouille esse beef ribs est fatback. Ground round laborum anim alcatra, cupim nulla consectetur biltong pork chop prosciutto short ribs. Non lorem salami proident in ham hock voluptate landjaeger pig ut turkey fatback ground round filet mignon.

** - bacon image provided by https://en.wikipedia.org/wiki/Bacon
** - lorem ipsum text generated by https://baconipsum.com