Question

当我使用这些地址＆＃34; file：/// C：/Users/h/Desktop/test/a.html#cs"，＆＃34; file：/// C：/ Users /h/Desktop/test/a.html#chgd"或＆＃34; file：/// C：/Users/h/Desktop/test/a.html#wmnh"我希望他们在标题和网页浏览器顶部框架之间显示空白区域（请查看图片）。

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

enter image description here

<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>

Answer 1

只需添加一些CSS，例如：

h4 {
    margin-top: 20px;
}

您可以将其添加到h4标记或整个body以将整个页面向下移动。要执行此操作，请将此内容添加到新的CSS文件中，并将其链接到头部，如下所示：

<link href="mynew.css" rel="stylesheet"/>

或者您可以将其直接添加到页面中，方法是将其包装在style标记中：

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

一个（极端）示例：

＆＃13;

h4 {
  margin-top: 100px;
}

＆＃13;

<h4>This is the title</h4>
This is the body

＆＃13;

Answer 2

您可以将top padding应用于body元素：

body {
    padding-top: 4px; /* Or whatever amount you want */
}

Live Example

标题和Web浏览器之间的空白

2 个答案: