文章/答案/技术大牛

发布

社区首页 >问答首页 >页面上的浏览器ctrl+f find在静态标头后面显示结果

问页面上的浏览器ctrl+f find在静态标头后面显示结果
EN

Stack Overflow用户

提问于 2013-01-14 18:52:43

回答 7查看 1.9K关注 0票数 16

我已经创建了一个页面，它有一个页眉，即使我滚动页面，它也会保持原样。

问题是，当我在浏览器中通过按Ctrl+f键查找单词，并试图在我的网页上搜索一些东西时，搜索会在标题div后面进行。我已经向下滚动以查看搜索到的作品(对于浏览器搜索到的部分，它会突出显示)。

我注意到gmail也有一个标题，它也会在页面滚动时保持不动，而且他们也会处理这个"find“问题。

任何关于我如何解决这个问题的建议。

下面提供了我的页面的示例源代码：

    <html>

<head>
<style> 
#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 0 none;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
}
#masthead {
    border-bottom: 0 none;
    border-top: 4px solid #171A23;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
}
#masthead {
    border-bottom: medium none;
    border-top: 0 none;
    box-shadow: none;
    overflow: visible;
    position: fixed;
}
#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 1px solid #666666;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
}

div, p, span, a, li, strong {
    font-family: Arial,sans-serif;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend {
    border: 0 none;
    font-size: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
</style>
</head>
<body>
<div id="masthead">
  <div id="universal-nav" style="height:40px; background-color:#eaeaea;" >

  </div>
  <div class="menu-subtabs" style="height:30px; background-color:#fafafa;"">
        <h2>SalesOne</h2>


  </div>
</div>
</br></br></br></br></br>
<table border="0" summary="Content Block">
    <tr>
        <td>
            <p xmlns="">
                <a href="#Win">Win Summary</a>
                <br/>
                <a href="#Client">Client</a>

                <br/>
                <a href="#Overview">Project Overview</a>
                <br/>
            </p>
            <p xmlns="" id="Win">
                <strong>
                    <font color="#008000">Win Summary</font>
                </strong>

            </p>
            <p xmlns="">
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.</p>
*/


            <p xmlns="" id="Client">
                <font color="#008000">
                    <strong>Customer</strong>
                </font>
            </p>
            <p xmlns="">
                <a href="http://www.yara.com/">Yara International ASA</a>Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.
            </p>


            <p xmlns="" id="Overview">
                <strong>
                    <font color="#008000">Project Overview</font>
                </strong>
            </p>
            <p xmlns="">
                ITS Enterprise Services - security services will provide hosted and managed services as part of SO project for data center hosting and management. The security components include:</p>

        </td>

    </tr>
</table>
</body>
</html>
</html>

先谢谢你，齐山

javascript

html

css

回答 7

Stack Overflow用户

回答已采纳

发布于 2013-01-18 00:09:38

Gmail有一个带有溢出滚动的div，所以它们永远不会在标题下隐藏任何东西。你也应该这样做，不要使用位置固定，让内容部分尽可能大，而不是离开你的窗口视区。尝试如下所示：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style> 
#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 0 none;
    min-width: 980px;
    width: 100%;
}

div, p, span, a, li, strong {
    font-family: Arial,sans-serif;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend {
    border: 0 none;
    font-size: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

#content{
    overflow: scroll;
    overflow-x: hidden;
}
</style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var head = $('#masthead').height(),
        remaining_height = parseInt($(window).height() - head);
        $('#content').height(remaining_height);
    });
</script>
</head>
<body>
<div id="masthead">
  <div id="universal-nav" style="height:40px; background-color:#eaeaea;" >

  </div>
  <div class="menu-subtabs" style="height:30px; background-color:#fafafa;"">
        <h2>SalesOne</h2>


  </div>
</div>
    <div id="content">
<table border="0" summary="Content Block">
    <tr>
        <td>
            <p xmlns="">
                <a href="#Win">Win Summary</a>
                <br/>
                <a href="#Client">Client</a>

                <br/>
                <a href="#Overview">Project Overview</a>
                <br/>
            </p>
            <p xmlns="" id="Win">
                <strong>
                    <font color="#008000">Win Summary</font>
                </strong>

            </p>
            <p xmlns="">
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.</p>
*/


            <p xmlns="" id="Client">
                <font color="#008000">
                    <strong>Customer</strong>
                </font>
            </p>
            <p xmlns="">
                <a href="http://www.yara.com/">Yara International ASA</a>Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.
            </p>


            <p xmlns="" id="Overview">
                <strong>
                    <font color="#008000">Project Overview</font>
                </strong>
            </p>
            <p xmlns="">
                ITS Enterprise Services - security services will provide hosted and managed services as part of SO project for data center hosting and management. The security components include:</p>

        </td>

    </tr>
</table>
        </div>
</body>
</html>

票数 8

Stack Overflow用户

发布于 2013-01-14 18:59:04

按照您描述的方式，我想您应该使用position: fixed和z-index，或者可能使用javascript，将标题div覆盖在页面上。

相反，请尝试以下操作：

<div class="header">this is the header</div>
<div class="content" style="overflow: scroll;">
  this is the content div, if the content becomes to large it will scroll
</div>

overflow: scroll属性将使div可滚动，而不是整个页面。这将使您的标题可见，而不会将内容放在标题后面。

希望这能有所帮助！

票数 10

Stack Overflow用户

发布于 2013-01-24 07:21:16

我有一个解决方案，但我不知道你会不会喜欢。

默认情况下，标头的opacity将设置为类似...opacity:0.5;，这将使它几乎看不见，如果你正在搜索，而可搜索的单词恰好在它后面，你就能看到它。

在标题上移动鼠标时，可以将其opacity更改为1。

JQUERY

$("#header").mouseover(function(){

    $("#header").css("opacity","1");
});

$("#header").mouseout(function(){

    $("#header").css("opacity","0.5");
});

你也可以稍微改变一下颜色，例如，如果它是蓝色的，你可以选择深蓝色和浅蓝色，因为你使用的颜色是灰色的，感觉很浅。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14317087

复制

相似问题

问页面上的浏览器ctrl+f find在静态标头后面显示结果
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面上的浏览器ctrl+f find在静态标头后面显示结果EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面上的浏览器ctrl+f find在静态标头后面显示结果
EN