Question

该想法是使用户能够单击“显示更多”（“Читајвише”）并显示完整的文章，但是接下来的挑战是计算容器的高度。所以我正在使用display：table和display：table-row这样，我可以避免计算该高度。现在出现另一个问题，那就是宽度，因为我相信display：table没有宽度。那怎么办？

请原谅我发布了太多的CSS，我懒于删除它。但是javascript就在那里，您可以看到我在添加div来包装文章之前的工作，以尝试解决此问题，但无济于事。

因此，我再次希望只在需要时使用水平滚动条作为PRE标签。

注意：

.main-style{
     max-width:800px;
...

解决方案可以使用CSS或javascript。

          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>

Answer 1

您可以尝试为容器设置2种状态

.container {
    max-height: 200px; // minimised
    overflow: hidden;
}

和

.conainer.active {
    max-height: auto;
}

显示更多按钮可以将活动类添加到容器中。

document.querySelector("#showMore").addEventListener(function(){
    document.querySelector(".contaner").classList.add("active");
});

其中 showMore 是按钮的ID，容器是文章的类。

Answer 2

与

$('#theExactId')[0].getBoundingClientRect()
$(yourDom)[0].getBoundingClientRect()

您可以获取这些属性

底部

高度

左

右

顶部

宽度

x

y

为数字

动态加载HTML并尝试正确显示我

2 个答案: