html - 如何在不超出窗口高度的情况下将标题添加到可独立滚动的 div？-6ren

html - 如何在不超出窗口高度的情况下将标题添加到可独立滚动的 div？

转载作者：行者123 更新时间：2023-11-28 00:14:14

我找到了另一篇文章，它让我非常接近我正在寻找的东西，但不是所有的方式。(http://stackoverflow.com/questions/10474354/layout-with-fixed-header-and-footer-fixed-width-sidebar-and-flexible-content)

本质上，我想为每个可滚动区域添加一个页眉/标题部分。这些不应在各自的部分内滚动。这是 jsfiddle，我已经注释掉了标题部分。添加它们时，它会将 div 推到窗口的高度之外，从而扩展内容。感谢您的帮助!

原始代码如下:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Application Wireframe</title>
<style type="text/css">
    body    {
        margin: 0;
        height: 100%;
    }

    #header {
        text-align: left;
        background: #4f0f00;
        color: #fff;
        width: 100%;
        margin: 0 0 0 0;
        border: 0;
        overflow: hidden;
        position: fixed;
    }
    #accountbar {
        background-color: #000000;
        color: white;
        height: 40px;
        width: 100%;
    }


    #contextbar {
        position:fixed;
        top:40px;
        width: 100%;
    }
    #leftheader {
        background-color: #66CCFF;
        height: 40px;
        width:200px;
        float:left;
    }
    #contentheader {
        background-color: #996600;
        color: white;
        height: 40px;
    }

    #middle {
        position:fixed;
        top:80px;
        width: 100%;
        height: 100%;
    }

    #left_col {
        float: left;
        width: 200px;
        /*height: 100%;*/
    }
    #left_col_wrap  {
        /*width: 100%;
        height: 100%;
        position: fixed;*/
    }
    #leftnav {
        background-color: #66FFFF;
        height: 100%;
        overflow: scroll;
        /*width: 200px;*/
    }

    #main_col   {
        /*margin-left: 200px;*/
        /*height: 100%;*/
    }
    #main_content_wrap  {
        /*position:fixed;
        width:100%;
        height: 100%;*/
    }
    #messagegap {
        background-color: white;
    }
    #contentpane {
        background-color: #FFAA00;
        height: 100%;
        overflow: scroll;
    }
    #contentfoot {
        background-color: #C80;
        height: 20px;
        position: fixed;
        width: 100%;
        bottom: 0;
        padding-bottom: 18px;
    }
    #footer {
        background-color: #CCCCCC;
        clear: left;
        width: 100%;
        position: fixed;
        bottom: 0;
    }
</style>
</head>
<body>
<div id="header">
    <div id="accountbar"><b>Account Bar</b> -always visible-this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="contextbar">
    <div id="leftheader"><b>Left Header</b></br>-usually says "Contents"-</div>
    <div id="contentheader"><b>Content Header</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="middle">
    <div id="left_col">
        <div id="left_col_wrap">
            <div id="leftnav"><b>Left Navigation</b>
                <ul>
                <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>  
    </div>
    <div id="main_col">

        <div id="main_content_wrap">
            <div id="contentpane"><b>Content Pane</b>
<p>Content Pane</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</p>
                <ul>
                    <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer"><b>Footer</b> -always visible, always at bottom of window-</div>
</body>
</html>

解决方法如下:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Application Wireframe</title>
<style type="text/css">
    body    {
        margin: 0;
        height: 100%;
    }

    #header {
        text-align: left;
        background: #4f0f00;
        color: #fff;
        width: 100%;
        margin: 0 0 0 0;
        border: 0;
        overflow: hidden;
        position: fixed;
    }
    #accountbar {
        background-color: #000000;
        color: white;
        height: 40px;
        width: 100%;
    }


    #contextbar {
        position:fixed;
        top:40px;
        width: 100%;
    }
    #leftheader {
        background-color: #66CCFF;
        height: 40px;
        width:200px;
        float:left;
    }
    #contentheader {
        background-color: #996600;
        color: white;
        height: 40px;
    }

    #middle {
        position:absolute;
        top:80px;
        width: 100%;
        overflow-y: visible;
        bottom: 8px;
        /*height: 100%;*/
    }

    #left_col {
        float: left;
        width: 200px;
        /*height: 100%;*/
    }
    #left_col_wrap  {
        /*width: 100%;
        height: 100%;
        position: fixed;*/
    }
    #leftnav {
        background-color: #66FFFF;
        height: 100%;
        overflow: scroll;
        /*width: 200px;*/
    }

    #main_col   {
        /*margin-left: 200px;*/
        /*height: 100%;*/
    }
    #main_content_wrap  {
        /*position:fixed;
        width:100%;
        height: 100%;*/
    }
    #messagegap {
        background-color: white;
    }
    #contentpane {
        background-color: #FFAA00;
        height: 100%;
        overflow: scroll;
    }
    #contentfoot {
        background-color: #C80;
        height: 20px;
        position: fixed;
        width: 100%;
        bottom: 0;
        padding-bottom: 18px;
    }



    #footer {
        background-color: #CCCCCC;
        clear: left;
        width: 100%;
        position: fixed;
        bottom: 0;
    }

</style>
</head>
<body>
<div id="header">
    <div id="accountbar"><b>Account Bar</b> -always visible-this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="contextbar">
    <div id="leftheader"><b>Left Header</b></br>-usually says "Contents"-</div>
    <div id="contentheader"><b>Content Header</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="middle">
    <div id="left_col">
        <div id="left_col_wrap">
            <div id="leftnav"><b>Left Navigation</b>
                <ul>
                <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>  
    </div>
    <div id="main_col">
        <div id="main_content_wrap">
            <div id="contentpane"><b>Content Pane</b>
                <p>Content Pane</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</p>
                <ul>
                    <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer"><b>Footer</b> -always visible, always at bottom of window-</div>
</body>
</html>

最佳答案

为此你需要使用 position: fixed; 我想你正在寻找这个。

HTML:

<div id="header">  Header Content    </div>

<div id="wrapper">

    <div id="leftheader"> Left Header   </div>

        <div id="leftwrapper">
                 ---CONTENT HERE---
        </div>        

    <div id="rightheader"> Right Header </div>

        <div id="rightwrapper">                     
                ---CONTENT HERE---
        </div>        
</div>

<div id="footer">   Footer Content    </div>

CSS:

<style type="text/css">
 div#header
 {position: fixed;left: 0px;top: 0px;height:100px;width:100%;background: black;color: White; }

  div#leftheader
  {position: fixed;left: 0px;top: 100px; height: 50px;width: 30%;float: left; background: red; color: White;    }

  div#leftwrapper
  {position: fixed;left: 0px;color: Maroon;margin-top: 150px;margin-left: 0;margin-bottom: 100px; width: 30%; min-width: 30%; height: 600px; max-height: 600px; overflow-y: auto;    }

  div#rightheader
  {position: fixed;left: 0px;top: 100px; height: 50px;width: 70%;margin-left: 30%;float: right;background: green;color: White;}

  div#rightwrapper
  {position: fixed;left: 0px;color: Purple;margin-left: 30%;margin-top: 150px;margin-bottom: 100px;width: 70%; min-width: 70%;height: 500px;max-height: 500px;overflow-y: auto; }

  /*div#wrapper
  {   height: 1000px;   }*/        

  div#footer
  {position: fixed;left: 0px;bottom: 0px; height: 100px;width: 100%;background: black;color: White;}
</style>

注意:我只在 Firefox 中测试过。

希望对你有所帮助。谢谢并继续发帖。

干杯。 !!

关于html - 如何在不超出窗口高度的情况下将标题添加到可独立滚动的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13206116/

文章推荐： C++增量++运算符重载

文章推荐： html - 向上滚动分区并修复另一个分区

文章推荐： javascript - 引用 django javascript 文件中的其他静态文件

独立；获取方法的参数
我如何使用 CQLINQ 获取当前方法的输入参数集合？有像“参数”或“参数”这样的集合，只有“NbParamenter”不适合我的目的。最佳答案事实上，CQLinq 还没有这个功能。但是，在许多情
makefile 独立@符号和目录关键字
我想知道是否有人知道我的 makefile 中独立的 @ 符号和“dir”命令在这里(第二行和第三行)的作用: $(BUILD)/%.o: %.cpp @mkdir -p $(dir $@)
makefile 独立@符号和目录关键字
我想知道是否有人知道我的 makefile 中独立的 @ 符号和“dir”命令在这里(第二行和第三行)的作用: $(BUILD)/%.o: %.cpp @mkdir -p $(dir $@)
java - Spark 独立
我的机器上有带有 4 个 cpu 的 Ubuntu 14.04(nproc 恢复了 4 个)。我安装并执行 Spark Standalone 后(本地)，我可以自己定义不同数量的奴隶。例如我想要有4个
C# 独立 WebDAV
我看到所有这些 iPhone 应用程序都带有内置的独立 webDav 服务器。是否有可以集成到现有应用程序中的独立(如在其自己的 IIS 中)C# webDAV 项目。最佳答案至少有两个用于 .N
django - 独立 Django 应用程序中的迁移
我如何在独立的 Django 应用程序上进行迁移(即不属于任何项目的应用程序)。例如在以下之后:https://docs.djangoproject.com/en/1.8/intro/reusabl
svn - 独立 SVN 查看器
我目前正在使用 tortoiseSVN 对本地编程文件进行版本控制。我不运行 SVN 服务器，因为可以直接使用 tortoiseSVN(例如 http://invalidlogic.com/2006/
javascript - 如何在Bootstrap中为*独立*几个进度条部分设置动画？
我有一些 Bootstrap 代码，当用户查看它时，它可以很好地为进度条部分设置动画。然而它动画全部页面中的进度条而不是动画仅限该查看部分中的进度条。结果，当用户转到进度条的另一部分时，这些已
iOS 独立 PWA 输入捕获
我认为我们在 iOS 13.2/13.3 中发现了关于在独立模式下运行的 PWA 的回归。由于在 iOS PWA 上无法访问 getUserMedia() 我们依赖 capture HTML5 输入
excel - 独立 Excel 宏
我有一个每周从系统运行一次的报告，并将数据导出到 Excel 文档中。我已经设置了将数据导出到 Excel 的工具，以便在格式化方面做得很好，但是一旦数据进入 Excel，我还需要做更多的事情。是否
java - 独立(并行)替换字符串中的一组子字符串
//值数组的格式为 { "var1", "val1", "var2", "val2",.. } public static String replaceMethod(String template,
java - 独立 jar 滞后
当我在 eclipse 中运行我的项目时，它工作正常，当我将它导出为独立 jar 时，它会滞后。我使用相同的 vmargs，在 Eclipse 中尝试了 3 种不同的导出设置，似乎没有任何帮助最佳答
java - 独立 Java 程序中的注释基础配置
我了解到 Java EE 中我非常喜欢的注释基础配置(@Resource)功能。然后我注意到注释实际上是 Java SE 的一部分。所以我想知道是否可以将它与 Java SE 一起使用。我当然可以在
java - jpa + hibernate + 独立
我无法理解为什么这种关系没有被持久化，并且程序不会正常退出，但在 Eclipse 中继续运行。下面是我的代码，排除了包名: 主要: import java.io.BufferedInputStrea
java - 独立 java 应用程序的线程转储
我有一个在 Linux + Java 6 上运行的独立 Java 应用程序，它似乎被卡住了(没有生成日志)我如何在不使用任何其他工具(例如 jstack)的情况下获取此线程转储尝试了以下命令，但它们
javascript - 独立 Babel 和使用箭头函数插件？
我正在非节点环境中构建应用程序，但我想利用 Babel 的 ES6 转译，以便我可以编写更好的代码并且仍然支持 IE11。所以我继续包含在这里找到的独立文件: https://github.com/
MySQL 64 位？独立？
扩展我对 MySQL 的理解。 1) 是否需要 64 位帮助？我是安装还是单独使用？ 2) 如果我打算在 MySQL Community Service 中使用 64 位，它会影响仅提供 32 位的
java - 独立 Java 应用程序的规则引擎
我有一个独立的 Java 应用程序，我必须为其集成一个规则引擎。我应该使用属性文件或 XML 文件定义规则。我需要规则引擎来读取属性或 XML 文件中定义的这些规则，并相应地在应用程序中实现代码。任
java - 独立 Wiremock + 使用的端口
我是wiremock新手，我正在尝试使用它来记录我负责集成测试的java应用程序的请求和响应。我知道我的命令将类似于: java -jar wiremock-1.57-standalone.jar
android - 独立 RadioGroup 列表
我到处寻找我的问题的解决方案，但我的问题有点具体...我需要有关如何创建独立 radioGroup 列表的建议，例如图示: o item1 • item1' • item2 或 item2' o it

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在不超出窗口高度的情况下将标题添加到可独立滚动的 div？