动态加载html并尝试正确显示i

          var $el, $ps, $up, totalHeight;
            
            window.onload = function(){
              $("pre").wrap("<div></div>");
              $("article").wrap('<div style="overflow:auto"></div>');
            };
            
            $(".sidebar-box .button").click(function() {
            
              $p  = $(this).parent();
              $up = $p.parent();
            
              $up.css({"display":"table"});
            
              $up.children('*').css({"display":"table-row"});
            
              // fade out read-more
              $p.fadeOut();
            
              // prevent jump-down
              return false;
            });

         body {
         font-size: 16px!important;
         }
         @media screen and (min-width: 600px) {
         body {
         font-size: calc(16px + (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         body {
         font-size: 18px!important;
         }
         }
         h1 {
         font-size: 32px!important;
         }
         @media screen and (min-width: 600px) {
         h1 {
         font-size: calc(32px + 4 * (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         h1 {
         font-size: 36px!important;
         }
         }
         h2 {
         font-size: 24px!important;
         }
         @media screen and (min-width: 600px) {
         h2 {
         font-size: calc(24px + 4 * (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         h2 {
         font-size: 28px!important;
         }
         }
         h3 {
         font-size: 18px!important;
         }
         @media screen and (min-width: 600px) {
         h3 {
         font-size: calc(18px + 4 * (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         h3 {
         font-size: 22px!important;
         }
         }
         h4 {
         font-size: 15px!important;
         }
         @media screen and (min-width: 600px) {
         h4 {
         font-size: calc(15px + 4 * (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         h4 {
         font-size: 19px!important;
         }
         }
         html, body {
         height: 100%!important;
         }
         .main-style{
         min-height: 100%;
         height: auto !important;
         height: 100%;
         max-width:800px;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: -130px;
         /* the bottom margin is the negative value of the footer's height */
         }
         .sidebar-box {
         max-height: 300px;
         position: relative;
         overflow: hidden;
         }
         .sidebar-box .read-more { 
         position: absolute; 
         bottom: 0; 
         left: 0;
         width: 100%; 
         text-align: center; 
         margin: 0; padding: 30px 0; 
         /* "transparent" only works here because == rgba(0,0,0,0) */
         background-image: linear-gradient(to bottom, transparent, black);
         /*
         background-image: -webkit-gradient(
         linear,
         left top,
         left bottom,
         color-stop(0, rgba(255, 0, 0, 0)),
         color-stop(1, rgba(255, 0, 0, 100)));
         */
         }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="main-style">
         <article class="sidebar-box">
            <h1>„TADOConnection“ – Исправан начин да се користи „LoginPrompt := true“</h1>
            <p>
               Нисам до сада никако разумео шта "LoginPrompt := true" уопште ради.
               Али сада знам да је исправан начин да се користи следећи:
            </p>
            <pre>procedure TfrmMain.FormShow(Sender: TObject);
var
  i: integer;
begin
  con1.Provider := 'SQLOLEDB.1';
  con1.Properties['Application Name'].Value := Application.Title;
  with TIniFile.Create(ExtractFileDir(ParamStr(0)) + '\setup.ini') do
  begin
    con1.Properties['Initial Catalog'].Value := ReadString('database', 'Initial Catalog', '');
                                                     con1.Properties['Ddata Source'].Value := ReadString('database', 'Data Source', '');
    if ReadBool('database', 'Integrated Security', false ) then
    begin
      con1.Properties['Integrated Security'].Value := 'SSPI';
      con1.Properties['Persist Security Info'].Value := 'False';
      con1.LoginPrompt := False;
    end
    else
    begin
      con1.Properties['Persist Security Info'].Value := 'True';
      con1.LoginPrompt := true;
    end;
  end;
end;

procedure TfrmMain.con1Login(Sender: TObject; Username, Password: string);
begin
  con1.Properties['User ID'].Value := Username;
  con1.Properties['Password'].Value := Password;
end;
</pre>
            <p>
               Овај код чита нека обележја потребна за објекат конекције из ИНИ датотеке. Онда, на основу вредности "Integrated Security" обележја које налази у фајлу одлучује да ли ће да користи уграђену безбедност (виндовс) или сикјуел сервер безбедност. Ако користи сикјуел сервер беѕбедност онда ће ОнЛогон догађај бити позван након позива фукције Опен над конекцијом. Али мало пре тога ће корисник добити на екрану образац за уност корисничког имена и лозинке. И онда можете поставити те вредности у догађају.
            </p>
            <p>
               Важно је да се користи колекција обележја за додељивање ових вредности а не замена стрингова у стринг конекције, јер тако неће хтети да ради.
            </p>
            <p class="read-more"><a href="#" class="button">Читај више</a></p>
         </article>
         <br>  
         <div class="push"></div>
      </main>