Web浏览器框架和标题之间的空间[重复]答案

【问题标题】：Space between web browsers frame and the title [duplicate]Web浏览器框架和标题之间的空间[重复]
【发布时间】：2015-05-02 20:01:05
【问题描述】：

当我粘贴地址“file:///C:/Users/h/Desktop/test/a.html#cs”时，“file:///C:/Users/h/Desktop/test/a Web 浏览器 URL 字段中的 .html#chgd" 或 "file:///C:/Users/h/Desktop/test/a.html#wmnh"

文本“儿童生存：增强免疫力和管理腹泻”、“儿童健康、成长和发育：用碘和铁预防精神障碍”或“妇女和新生儿生存与健康：铁补充剂和食品强化”将显示在网络浏览器框架的顶部。

今天，我想在网络浏览器框架的顶部和“儿童生存：增强免疫力和管理腹泻”、“儿童健康、成长和发育：用碘和铁预防精神障碍”或当您在 URL 字段中粘贴地址时，“妇女和新生儿的生存与健康：铁补充剂和食品强化”。粘贴 URL 地址后按下回车键后，它应该会自动发生。

相同的请求结果应该适用于 Firefox、IE 和 Chrome。

<html>
    <head>
        <title></title>
        <link href="bootstrap-theme.css" rel="stylesheet"/>
        <link href="bootstrap.css" rel="stylesheet"/>


        <script src="jquery-1.11.2.min.js"></script>            <script src="bootstrap.min.js"></script>        
    <script>

    jQuery(document).ready(function() {

        var url = document.location.toString();

        if ( url.match('#') ) {
            var hash = url.split('#')[1];

            // collapse the expanded panel
            $('#accordion .accordion-collapse').removeClass('in');

            // expand the requested panel
            $('#' + hash + '_c').addClass('in');
        }
    });


    </script>
    </head>


<body>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>   a<br>  


          <div id="accordion" class="accordion-group">                
                <div class="panel">
                    <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
                    <div id="cs_c" class="accordion-collapse collapse in">
                        <p>...</p>
                        <p>aaaaa</p>
                        <p>aaaaa</p>                    
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>                    
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>
                        <p>aaaaa</p>
                        <p>aaaaa</p>                    
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>
                        <p>aaaaa</p>
                        <p>aaaaa</p>                    
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>
                        <p>aaaaa</p>
                        <p>aaaaa</p>                    
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>        
                        <p>aaaaa</p>
                        <p>aaaaa</p>                        
                    </div>

                    <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
                    <div id="chgd_c" class="accordion-collapse collapse">
                        <p>...</p>
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>                    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>        
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>                    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>                    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>                    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>    
                        <p>bbbbb</p>                        
                        <p>bbbbb</p>                        
                    </div>

                    <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
                    <div id="wmnh_c" class="accordion-collapse collapse">
                        <p>...</p>
                        <p>ccccc</p>                    
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>                    
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>                    
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>                    
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>                    
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>                    
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>
                        <p>ccccc</p>                        
                    </div>
                </div>
            </div>



    </body> </html>

【问题讨论】：

您是否尝试过使用reset.css 或Normalize.css 文件？
从未听说过。
这个问题和your other question有什么不同？
拥有超过 2k 的代表，您应该知道不要再提出与您相同的问题 made previously

标签： jquery html css twitter-bootstrap

【解决方案1】：

您可以在 <h4> 元素的顶部添加填充，例如

  </script>
  <style>
    h4 {
      padding-top:20px;
      margin-top:-20px;
    }
  </style>
</head>

或者你可以用javascript来做。展开所需面板后，使用 scrollBy(0,-10) 向上滚动 10 个像素。但是，在调用scrollBy 之前，您需要让浏览器完成对页面布局的更新。这可以使用setTimeout 以零延迟实现：

  $('#' + hash + '_c').addClass('in');
  setTimeout(function() {
    window.scrollBy(0,-10);
  },0);

【讨论】：

源代码影响“儿童生存：提高免疫力和管理腹泻”、“儿童健康、成长和发育：用碘和铁预防精神障碍”或“妇女和新生儿”之间的空间生存与健康：铁补充剂和食品强化'
试一试，测试上面的代码。
我可以想象它确实如此，但是您的来源引用了本地资源，因此如果不在这里组装它们，我看不到您所看到的。您也许可以用负边距进行补偿，请参阅我的更新答案。
是否可以在 URL 中使用两个 id 并以某种方式使用 jquery 来达到要求的结果？
@HelloWorld 不确定您对这两个 id 的想法 - 我添加了一个我认为可以满足您需求的 javascript 解决方案