一个简单的百分百后台模板框架 兼容ie8

最新推荐文章于 2021-06-17 23:02:28 发布
最新推荐文章于 2021-06-17 23:02:28 发布
阅读量940 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/u/1421356/blog/347922
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

截图

使用table-layout实现 左栏任意大小 右栏保持填充 右栏内部高度也可自动适应

181911_ppGs_1421356.png

代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   * {
       margin:0;
       padding:0;
   }

   html {
       -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
       box-sizing:border-box;
       overflow:hidden;
   }

   html, body {
      height: 100%;
   }

   .container {
      width: 100%;
      height: 100%;
      display: table;
      border-collapse: collapse;
      background-color: #ccc;
   }

   .row {
      display: table-row;
   }

   .col {
      display: table-cell;
      vertical-align: top;
   }

   .block {
      width: 300px;
      /*height: 1700px;*/
 background: #129982;
   }

   .wf {
      width: 100%;
   }

   .table {
      width: 100%;
      height: 100%;
      display: table;
      border-collapse: collapse;
   }

   .scroll {
      width: 100%;
      position: relative;
      left: 0;
      top: 0;
      overflow: scroll;
   }

   .table-row {
      display: table-row;
   }

   .table-cell {
      display: table-cell;
   }

   .pl {
      height: 1200px;
   }

   .hf {
      height: 100%;
   }

   .bn {
      height: 40px;
   }

   /*.hf > * {*/
      /*height: 100%;*/
   /*}*/
 </style>
</head>
<body>
   <div class="container">
      <div class="row">
         <div class="col">
            <div class="scroll hf">
               <div class="block">
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  123132
               </div>
            </div>
         </div>
         <div class="col wf">
            <div class="scroll hf">
               <div class="container">
                  <div class="row">
                     <div class="col">
                        <div class="scroll">
                           <div class="bn">1</div>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col">
                        <div class="scroll">
                           2
                        </div>
                     </div>
                  </div>
                  <div class="row hf">
                     <div class="col">
                        <div class="scroll hf">
                           3
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>


转载于:https://my.oschina.net/u/1421356/blog/347922

weixin_34217711
关注
《信息化项目文档模板四——系统建设方案模板》
再见孙悟空的专栏
02-23 3942
系列文章目录 《信息化项目文档模板一——项目需求说明书》 《信息化项目文档模板二——项目启动会文档模板》 《信息化项目文档模板三——会议纪要模板》 《信息化项目文档模板四——系统项目蓝图设计模板》 《信息化项目文档模板五——系统详细设计模板》 《信息化项目文档模板六——系统开发计划模板》 《信息化项目文档模板七——系统功能测试模板》 《信息化项目文档模板八——系统压力测试模板》 《信息化项目文档模板九——系统推广上线计划模板》 《信息化项目文档模板十——系统用户操作手册模板》 《信息化项目文档模板十一——系
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9643
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
UI框架模板一(兼容IE8)
07-31
基于bootstrap的UI框架模板一(兼容IE8)
一款综合信息服务后台管理平台OA模板, 适合IE8以上
springmvc_freemarker的博客
09-20 1102
一款综合信息服务后台管理平台OA模板, 适合IE8以上 源代码下载地址：http://www.zuidaima.com/share/1617001643576320.htm
分享一套兼容IE8的后台单页模板，简洁漂亮质量很高
weixin_43356560的博客
10-08 3954
基于 layui。 遵循原生 HTML/CSS/JS 的书写与组织形式，上手容易，拿来即用。 最低兼容到IE8浏览器。 适配移动端。 GITHUB 地址
Bootstrap后台管理模板支持IE8以上
11-19
一个建立在Bootstrap3之上的、完全响应的管理仪表板模板设计，美丽而简单。
国产绝对非常漂亮兼容IE6+的后台管理系统模板BEST
09-12
国产绝对非常漂亮兼容IE6+的后台管理系统模板BEST，可以说我见过的国产最漂亮又兼容IE6的后台管理系统模板，真心的漂亮，包括的页面有后台登陆模板页面、工作台、表单提交、图片列表，数据表格列表、标签切换、工具导航等页面，这些页面基本能满足大多数后台管理系统的使用，大部分页面可以根据现有页面进行改造出来其他页面，模板是基于Iframe框架构造，比较适合国内人使用，模板总共有十几个页面。 想看样式的同学可以看下http://www.uimaker.com/uimakerdown/bstemplate/82645.html
AMF-JavaScript 后台管理框架 v1.0
10-28
欢迎使用 JavaScript 后台管理框架 - AMF AMF-可应用于网站后台、系统管理等领域。 01) 兼容: 天衣无缝的兼容性能，可完美运行于IE5.5\6+*、Firefox x+、Chrome x+、Safari x+、Opera x+等浏览器。 02) 快速...
AMF-JavaScript 后台管理框架.7z
07-07
01) 兼容: 天衣无缝的兼容性能，可完美运行于IE5.5\6+*、Firefox X+、Chrome X+、Safari X+、Opera X+等浏览器。 02) 快速: 基于JavaScript原生态开发，运行快速高效、系统全部主体文件50多KB能极快载入启动。 03)...
前端框架MVVM是什么（整理）
热门推荐
weixin_34352449的博客
11-05 1万+
前端框架MVVM是什么（整理） 一、总结 一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。   1、我大前端应该不应该做复杂的数据处理的工作？ 不应该 只要后端保证对外接口足够简单就行了，我请求api，你把数据返出来，咱俩就这点关系，其他都扯淡。 后端：我们这里的业务逻辑和数据处理会非常复杂！ 前端：关我屁...
兼容IE8的精美jQuery模态确认框插件
12-29
兼容IE8的精美jQuery模态确认框插件
modal:一个原生写的简单模态框，支持IE8以上、chrome
05-01
介绍 一个原生写的简单模态框，兼容IE8。 功能特性 1.支持标签属性关闭弹窗。 2.支持点击弹窗区域外背景关闭弹窗。 3.支持两种打开弹窗动画效果。 4.支持ESC快捷键关闭弹窗。 5.支持打开多个弹窗。 目录结构 │ //根目录 │ modal.html //示例文件 │ ├─css //样式目录 │ modal.css │ └─js //js目录 modal.js 使用说明 js示例 //打开弹窗 modal.init({    el: '#js-modal', //挂载值，必须是标签元素的#id    open: 'show' //show为打开 }); //关闭弹窗 modal.init({    el: '#js-modal', //挂载值，必须是标签元素的#id    open: 'hide' //hide为关闭 }); 属
一款强大的后台管理模板（通用） DIV+CSS
11-13
一款强大的后台管理模板（通用） DIV+CSS 一款强大的后台管理模板（通用） DIV+CSS 一款强大的后台管理模板（通用） DIV+CSS
基于bootstrap兼容ie7+后台模板
06-16
基于bootstrap兼容ie7+后台模板
兼容ie8的框架
weixin_34205076的博客
09-27 599
layui Flow-UI http://refined-x.com/Flow-UI/ 转载于:https://www.cnblogs.com/wang715100018066/p/7601467.html
html5 js插件兼容ie8,jquery.popup.js-兼容IE8的简单jQuery模态窗口插件
weixin_42305992的博客
06-17 411
jquery.popup.js是一款简单的兼容IE8浏览器的jQuery模态窗口插件。该模态窗口插件没有过多的参数，通过简单的调用就可以生成带动画过渡效果的模态窗口，非常简洁。使用方法下载压缩包，在页面中引入jQuery和jquery.popup.js文件。HTML结构该模态窗口的基本HTML结构为：创建一个全屏的遮罩层。....在遮罩层内放置模态窗口的内容，以及一个关闭模态窗口的按钮。这是第一个...
【jQueryUI】兼容IE6的前端框架jQueryUI的Helloworld，对话面板，修改其所有组件的字体大小
编程记录，亲测有效
09-24 7800
jQueryUI与ExtJs是非常出名的UI，这两个UI还有更大的一个好处就是兼容IE6。虽然jQueryUI一直被人说丑，但是，一直是最受欢迎的前端框架之一。 虽然一个网站全部都用jQueryUI布局很少，但是或多或少会用到里面一些实用的组件的。 jQueryUI的下载，先到其官网http://jqueryui.com/（点击打开链接），选择Download，下载最经典的jquery-ui-
IE8带给我们的又一惊喜，神奇的网页快讯
weixin_33725126的博客
03-31 129
IE8又给了我一个惊喜---网页快讯。使用它，我们可以抓取我们关注的某个页面上的某一块的内容，并直接显示在浏览器收藏夹的下面。感觉这是一个创举，网页快讯用官方的描述是这样： 网页快讯是网页中您可以订阅的一个特定部分，通过它您可以了解收藏网站何时提供更新的内容（如当前气温或不断变化的拍卖价格）。一旦您订阅了网页快讯，它将在收藏夹栏中显示为一个链接。在更新网页快讯时，收藏夹栏上的链接将以粗体格式显示...
（Web前端）十分优秀的后台管理框架收集
前端视听
07-10 552
Web 开发中几乎的平台都需要一个后台管理，但是从零开发一套后台控制面板并不容易，幸运的是有很多开源免费的后台控制面板可以给开发者使用，以下是我整理的一些UI框架模板，可以拿来稍加改造就能直接使用 1、vue-element-admin https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 本项目的定位是后台集成方案，不适合当基础模板来开发，模板建议使用 vueAdmin-template ， 桌面端 electron-vue-ad
VB获取IE网页框架源码及后台动态页面
"VB 获取IE浏览器网页的框架源码程序是一种使用Visual Basic (VB) 编程语言来实现的功能，该程序能够访问并提取Internet Explorer (IE) 浏览器中网页框架内的源代码，以及框架内部的动态网页节点。通过这个程序，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值