HTML_后台框架全屏界面_fixed形式布局

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  html, body {
   width:100%;
   height:100%;
   padding: 0;
   margin: 0;

   background-color: #f3f3f3;
   font-family: "Hiragino Sans GB",\5FAE\8F6F\96C5\9ED1,Tohoma;;
 }

 .top{
  position: fixed;
  height: 80px;
  width: 100%;
  background-color: red;
}
.mid{
  position: fixed;
  margin-top: 80px;
  height: 100%;
  width: 100%;
  background-color: blue;
  min-width: 960px;
}
.left{
  float: left;
  height: 100%;
  width: 220px;
  background-color: green;
  overflow-y:auto;
  direction: rtl;
  unicode-bidi: embed;
  text-align: left;
}
.right{
  margin-left: 220px;
  height: 100%;
  background-color: orange;
  overflow-y:auto;
}
</style>

</head>
<body>
  <div class="top">top</div>
  <div class="mid">
    <div class="left">
      <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>
    </div>
    <div class="right">
    <p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p>
    </div>
  </div>
</body>
</html>
时间: 2024-10-22 05:09:10

HTML_后台框架全屏界面_fixed形式布局的相关文章

HTML_后台框架全屏界面_简易table形式

<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>Document</title>  <style>   html, body {    width:100%;    height:100%;    padding: 0;    margin: 0;    overflow: hidden;    background-color

android4.4上全屏界面实现禁止状态栏下拉

附上我改动的方法:PhoneWindowManager.java里面的改动 --- a/frameworks/base/policy/src/com/android/internal/policy/impl/PhoneWindowManager.java +++ b/frameworks/base/policy/src/com/android/internal/policy/impl/PhoneWindowManager.java @@ -2863,7 +2863,9 @@ public cla

KK上全屏界面如何实现禁止状态栏下拉?

[SOLUTION] Google从KK开始增加了状态栏透明以及全屏 界面有通知可以下拉状态栏的设计,而这个设计出现的隐患是设置了FULL_SCREEN的界面是无法禁止状态栏下拉的,这样对一些工程测试app可能会造 成一定的影响,但是以google默认的设计,应用端无法修改此设计来满足自己的需求. MTK 内部已经开发提供新的接口来实现全屏界面禁止下拉状态栏,如果贵司的代码还没有这部分逻辑,请参考如下: 1. frameworks\base\core\java\android\view\View

仿QQ视频全屏界面旋转实现

// 实现效果:界面支持系统自动转屏和点击转屏 // ViewController.m // rotatoTest // Copyright © 2016年 yaoyao. All rights reserved. // 1.关闭系统自动转屏 // 2.获取设备方向,设置转屏, // 3.点击按钮,设置转屏 #import "ViewController.h" #import <UIKit/UIKit.h> #import <CoreGraphics/CoreGrap

x5webview 自定义全屏界面

集成X5WEBVIEW可以选择全屏模式为标准全屏还是x5全屏,而不设置默认为false. 首先看看标准全屏的基本设置, if (webView.getX5WebViewExtension() != null) { Bundle data = new Bundle(); data.putBoolean("standardFullScreen", false);// true表示标准全屏,false表示X5全屏:不设置默认false, data.putBoolean("suppo

VM虚拟机全屏显示

在虚拟机中使用全屏界面会有更强的用户体验.在编辑该文章的时候就是在使用虚拟机windows2008 R2系统.我的笔记本是苹果双系统.虚拟机安装在win7 64位系统下 1.首先查看主机的屏幕分辨率 在桌面上.右击鼠标.选择屏幕分辨率.查看并记忆该分辨率. 2.在虚拟机上单击鼠标右键,选择屏幕分辨率.将分辨率改动为主机上的分辨率: 3.在虚拟机的工具栏上选择全屏模式"向4个方向扩散的图标" 此刻就是全屏模式了. 可是我还不惬意,由于VM的工具栏总是在上边.输入网址等操作非常麻烦,怎样处

CSS+DIV两栏式全屏布局

在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <meta http-equiv=&quo

iframe框架嵌套技巧(全屏,去双滚动条)

一般情况下我们很少用到iframe(框架),但有些特殊的情况下我们不得不使用iframe,那么或许或遇到嵌套内容不全屏,网页周围有边框,双滚动条等等情况,下面来说一下处理技巧. 全屏与边框处理: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Colin-iframe Test</

iOS开发--QQ音乐练习,后台播放和锁屏界面

一.设置后台播放 首先允许程序后台播放 代码实现 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 2 3 // 设置后台播放的代码,步骤 4 // 1.获取音频的会话 5 AVAudioSession *session = [AVAudioSession sharedInstance]; 6 // 2.设置后台播放类型