html - 如何在IE中制作滚动面板-6ren

html - 如何在IE中制作滚动面板

转载作者：行者123 更新时间：2023-11-28 12:32:44

24

4

我正在尝试设计一个包含三行的 HTML 模板:一个始终显示在屏幕顶部的页眉，一个始终显示在屏幕底部的页脚以及剩余的文本空间，在以下情况下使用滚动条必要的。

以下 HTML 在 FF 和 Chrome 中运行良好，但在 IE9 中不显示任何文本。有人知道哪里出了问题吗？

<!doctype html>
<html>
  <head>
<title>Image resize tetst</title>
<style type="text/css" media="screen">
    html, body {
      margin:  0;
      padding: 0;
      height:  100%;
      width:100%;
    }

    .wrapper {
      display: table;
      height:  100%;
      width:100%;
    }

    .wrapper-row {
      display: table-row;
      width:100%;
      height:  1px;
    }

    .wrapper-content {
      /* Firefox requires this */
      display: table-cell;
      width:100%;
    }

    .wrapper-row-expanded {
      height:  100%;
      display: table-row;
    }

    .wrapper-row-expanded > .wrapper-content {
      height: 100%;
    }

    .scroll-container {
      /* Firefox requires this to do the absolute positioning correctly */
      display:    inline-block;
      overflow-y: auto;
      position:   relative;
    }

    .scroll-content {
      position: absolute;
      top:      0;
      bottom:   0;
    }
  </style>

</head>
  <body>

    <div class="wrapper">

    <div class="wrapper-row">
        <div class="wrapper-content header">
        Header
        </div>
    </div>

    <div class="wrapper-row-expanded">
        <div class="wrapper-content scroll-container">
        <div class="scroll-content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate pulvinar ullamcorper. Integer aliquet nunc vitae massa egestas ullamcorper. Nunc volutpat eleifend sem, a convallis lacus placerat eu. Curabitur venenatis ipsum in magna bibendum tincidunt. Donec nunc metus, pellentesque ullamcorper pellentesque sit amet, ornare vel est. Nam vehicula mi nibh. Praesent consectetur ipsum tincidunt nunc tincidunt eleifend luctus nisi viverra. Donec consequat, sapien ac semper tempus, quam metus pellentesque dui, ut dictum magna nibh eu magna. Nullam condimentum turpis vel mauris ornare vehicula. Maecenas a urna at turpis venenatis iaculis in nec nunc. Nunc tempus massa sit amet arcu malesuada ornare. Aenean pellentesque euismod quam vitae ornare. Maecenas sodales, mauris vel imperdiet eleifend, massa sem pellentesque justo, sit amet malesuada felis justo in elit.
            </p>
        </div>
        </div>
    </div>

    <div class="wrapper-row">
          <div class="wrapper-content footer" style="height:200px">
            Footer
          </div>
    </div>

    </div>
  </body>
</html>

最佳答案

如果您为文本使用 iframed 并将其放在页眉和页脚之间怎么办？这样，如果您有更多文本，就可以向 iframe 添加滚动。

<iframe src="URL" scrolling="yes"></iframe>

关于html - 如何在IE中制作滚动面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18144328/

24

4

0

文章推荐： jquery - 粘性表格标题和列 - 两个固定列

文章推荐： swift - 使用 Kitura - Swift 保存数据

文章推荐： html - 如何在CSS中对齐图像和下载按钮？

文章推荐： ios - fb 登录按钮未在 View 中正确显示

javascript - 面板 : Both glyphicons toggle when inner panel is clicked 中的 Bootstrap 面板
我有一个 Bootstrap 面板，里面有另一个面板。两者在面板标题中都有一个字形图标。默认情况下，面板是折叠的。当面板折叠时，将设置 glyphicon-unchecked。当我点击这个字形图标时，
Grafana 自动刷新仪表板布局/面板？
使用 Grafana 时，我们会在某些电视上使用它。有谁知道制作它的方法，如果有人添加面板，更改布局等，它不仅会自动刷新数据，还会自动刷新实际仪表板？我们真的厌倦了不断要求具有远程访问权限的人登录并
java - java中的隐藏标签/面板
基本上，我试图让屏幕底部有 3 个按钮，然后在屏幕中间有一个包含文字的标签。但是，我似乎无法同时在 GUI 中同时拥有按钮和标签。我是一名初学者，对布局了解不多(即使我已经阅读过它们)，因此任何帮助/
java - 面板/按钮和重新绘制令人头痛
作为学校的类(class)作业，我们必须提出一个自定义项目，我选择了一个原本打算在 ActionScript 上编写的游戏创意，但决定在 Java 上插入它。最初进展顺利，游戏代码正常运行， Spri
Java 面板/框架图形不工作
我正在尝试使用 Java Graphics 制作一个生命模拟游戏，但是当运行我的代码时，屏幕的左侧三分之一是灰色的。我希望整个屏幕是白色的，黑色方 block 代表生命方 block 。我对所有 ja
javascript滑动(侧)面板
下面是动态驱动的一个不错的“下拉面板”。 http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm 如您所见，它是一个面板，在打开时
javascript - 只打开一个弹出窗口(面板)
所以我有这个函数 onDisplayError ，如果请求失败，每次都会调用它。这意味着如果用户按下保存按钮并且 3 个请求失败，我当前会收到 3 个弹出消息。我的目标是此函数检查我的弹出窗口是否已打
Java GUI 面板
我正在尝试为我的一个类(class)制作一款游戏，但在实现一些我想做的事情时遇到了麻烦。本质上，我希望在同一个图形用户界面窗口中包含多个不同的部分。据我了解，我会使用 JPanel 来创建这些不同的
Jquery 面板 + 从顶部检测滚动？
我目前正在测试这种类型的面板 jquery: http://codyhouse.co/gem/css-slide-in-panel/ 但是当我想检测从顶部滚动以显示一个 div 时:没办法:( 一种检
c# - 面板——滚动条可见事件
我可能正在搜索错误的问题，但我找不到这个问题的答案。我有一个 AutoScroll 设置为 true 的面板。控件动态添加到面板。我需要在滚动条可见时触发一个事件，但我找不到这样的事件。如有任何建
html - 通过连接器连接 Bootstrap 面板
我有一堆 Bootstrap 面板，其中一些是相互关联的。有点像 Panel A -> Panel B -> Panel C 当用户单击面板 B 时，将显示面板 C，当单击面板 C 时，将显示面板 D
panel - 根据选定的模板变量隐藏 grafana 面板
我正在尝试开发一种带有指标的下拉列表，并相应地针对应该出现在仪表板上的选定指标特定面板。反之亦然，如果未选择指标，则面板应隐藏。我找到了链接 http://search-devops.com/m/k
dynamic - ExtJs 面板 - 添加动态组件
我有一个窗口，窗口里面有面板。我动态地向面板添加组件。这些组件采用“hbox”布局，以便它们水平排列。单击按钮后，我将在“hbox”布局中再向面板添加一行类似组件。这里的问题是我想在第一行下面添加第二
jquery - 展开验证错误时的 Accordion 面板
我使用 jQuery Accordion 将表单拆分为多个面板，并使用 jQuery 验证来检查所需字段。只要验证字段位于打开的面板中，它就可以很好地显示已验证字段中的错误。举个例子。假设我有三个
jQuery Mobile 面板 - 检查它是否打开
我正在尝试检查我的面板是打开还是关闭。我尝试过这样的: $(document).on('open', '.ui-panel', function(){ console.log('open');
macos - 如何制作在全屏模式下消失的 float 面板
我有一个面板，我想将其 float 在所有窗口之上并出现在所有空间中。这可以通过轻松完成 [self.panel setLevel:kCGUtilityWindowLevel]; [self.win
r - 具有分组回归线的叠加 xyplot 面板
我想在格子中的单个面板上叠加多个组，并且想要独立的回归线。获得多个面板相当容易，每个面板都有一条使用条件因子的回归线: xyplot( Petal.Width ~ Petal.Length |
Delphi:滑动(动画)面板
Delphi 有滑动(动画)面板组件吗？例如可以在 Raize Components 中找到它(带有“热点”或隐藏/显示按钮的左侧面板)。我不需要一个可调整大小的面板，而是一个可以从左向右水平平滑
javascript - 验证事件的 Accordion 面板
我有一个 Bootstrap Accordion : 我想禁用非事件面板中的所有输入控件。仅验证事件面板。我有一个检测事件选项卡的功能: $(".panel").on("show.bs.collap
java - 不同尺寸的 Swing 面板
我正在尝试将组件放入不同尺寸的面板中。但是，我意识到 GridLayout 将大小相同的部分分开。如何实现如下图所示 enter image description here import java.

首页

博学

6Ren·AI

商城

html - 如何在IE中制作滚动面板