网页浏览器框架和标题之间的空间 [英] Space between web browsers frame and the title

查看：90
本文介绍了网页浏览器框架和标题之间的空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我粘贴地址file：/// C：/Users/h/Desktop/test/a.html#cs时，file：/// C：/ Users / h / Desktop / test / a .html＃chgd或file：/// C：/Users/h/Desktop/test/a.html#wmnh。

将显示儿童生存：提高免疫力和管理腹泻，儿童健康，成长和发展：预防碘和铁的精神损害或女性和新生儿的生存和健康：铁补充和食物强化在网页浏览器框架的顶端。



今天，我希望在网页浏览器框架的顶部和文本'Child Survival：Boosting Immunity'和'在URL地址粘贴地址时，管理腹泻'，'儿童健康，成长和发育：预防碘和铁的精神损害'或'女性和新生儿的生存和健康：补铁和食物强化'。在粘贴URL地址后按下回车按钮后，它应该会自动发生。



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





 < HTML> 
< head> 
< title>< / title> 
< link href =bootstrap-theme.css =stylesheet/> 
< link href =bootstrap.css =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]; 
 
 //折叠扩展面板
 $（'＃accordion .accordion-collapse'）。removeClass（'in'）; 
 
 //展开请求的面板
 $（'＃'+ hash +'_c'）。addClass（'in' ）; 
} 
}）; 
 
 
< / script> 
< / head> 
 
 
< body>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br>一个<峰; br> 
 
 
< div id =accordionclass =accordion-group> 
< div class =panel> 
< h4 id =csclass =accordion-title>< a data-toggle =collapsedata-parent =＃accordiondata-target =＃cs_c> Child生存：提高免疫力和控制腹泻< / a>< / h4> 
< div id =cs_cclass =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 =chgdclass =accordion-title>< a data-toggle =collapsedata-parent =＃accordiondata-target =＃chgd_c >儿童健康，生长和发育：用碘和铁预防精神损害< / a>< / h4> 
< div id =chgd_cclass =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 =wmnhclass =accordion-title>< a data-toggle =collapsedata-parent =＃accordiondata-target =＃wmnh_c >女性和新生儿的生存和健康：补铁和食物强化< / a>< / h4> 
< div id =wmnh_cclass =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>


解决方案

您可以将填充添加到< 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）;


When I paste the address "file:///C:/Users/h/Desktop/test/a.html#cs", "file:///C:/Users/h/Desktop/test/a.html#chgd" or "file:///C:/Users/h/Desktop/test/a.html#wmnh" in the web browsers URL field

the text 'Child Survival: Boosting Immunity and Managing Diarrhoea', 'Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron' or 'Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification' will be displayed in the top of the web browsers frame.

Today, I would like to have space between the top of the web browser's frame and the text 'Child Survival: Boosting Immunity and Managing Diarrhoea', 'Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron' or 'Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification'when you have pasted the address in the URL field. It should be happened automatically after you have pressed the enter button after you have pasted the URL address.

Same requested result should be working for Firefox, IE and 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>

解决方案

You can add padding to the top of your <h4> elements, e.g.

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

Or you can do it in javascript. After you expand the desired panel, use scrollBy(0,-10) to scroll up by 10 pixels for example. However, you need to let the browser finishing updating the page layout before invoking scrollBy. This can be achieved using setTimeout with a zero delay:

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

这篇关于网页浏览器框架和标题之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆