文档章节

充满布局

赤月三号
 赤月三号
发布于 2017/07/29 14:07
字数 283
阅读 7
收藏 0
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css"> 
		* { margin:0; padding:0;}
		html,body,.parent{width:100%; height:100%;overflow:hidden;}
		.top{position:absolute;top:0;left:0;right:0;height:100px; background:#333;}
		.left{position:absolute;top:100px;left:0;bottom:50px;width:200px; background:red;}
		.right{position:absolute;overflow:auto;left:200px;right:0;top:100px;bottom:50px;background:blue;}
		.bottom{position:absolute;left:0;right:0;bottom:0;height:50px; background:#333;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
	<script>
		$(function(){
			$('#qh').on('click',function(){
				var width = $(this).parent().width();
				var j1 = (width == 50) ? {"width" : '200px'} : {"width" : '50px'}
				var j2 = (width == 50) ? {"left":"200px"} : {"left":"50px"}
				$(this).parent().stop().animate(j1,(width==50 ? 140 : 200));
				$(this).parent().siblings('.right').stop().animate(j2,170);
			});
		});
	</script>
	
</head>
<body>
	<div class="parent">
		<div class="top">top</div>
		<div class="left">
			<button id="qh">切换</button>
			11left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>leftleft<br/>left<br/>left<br/>left<br/><br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>
		</div>
		<div class="right">
		11right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>
		
		</div>
		<div class="bottom">bottom</div>
	</div>
</body>
</html>

 

© 著作权归作者所有

赤月三号
粉丝 19
博文 136
码字总数 69753
作品 0
昌平
前端工程师
私信 提问
Android中TabHost子tab分页布局无法铺满屏幕,请问有什么办法没?

在tab子页面布局,无法充满整个屏幕 ,不管是控件还是背景图片 ,旁边都有一小块无法充满

赠人玫瑰手有余香
2013/09/26
866
4
使用FrameLayOut来实现霓虹灯效果

1、首先是layout布局页面,使用7个Textview叠加在一起,因此,这里的layout布局使用FrameLayout帧布局,代码如下: <?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="ht......

跑堂打酱油
2013/07/26
455
0
SWT界面布局介绍之FillLayout

给控件设置FillLayout会使子控件充满父控件的整个空间。FillLayout是SWT布局中最简单的一个,它将所有窗口组件以相同尺寸放置到一行或者一列中,不能换行,也不能自定义边框和距离。下面用一...

山东-小木
2013/01/16
3.3K
3
Flutter 初探(三):容器类Widgets

学习内容 以下是容器类Widgets的部分汇总: Padding 布局限制类容器ConstrainedBox和SizedBox 装饰类容器DecoratedBox 变换Transform Container容器 Scaffold、底部导航 各个容器简易实现 以...

若数
04/20
0
0
iOS流布局UICollectionView系列一——初识与简单使用UICollectionView

iOS流布局UICollectionView系列一——初识与简单使用UICollectionView 一、简介 UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十...

珲少
2015/10/27
36.6K
5

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
4
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
8
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
897
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部