前言：

最近在学习HTML、CSS的过程中，想模仿一下百度首页。发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化（效果如下图所示），于是自己研究了一下并记录下来。

效果实现

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>垂直伸缩</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		body,html{

			height: 100%;

		}

		.content{

			min-width: 810px;

			min-height: 600px;

			height: 100%;

			border: 1px dashed green;

		}

		.wrap{

			width: 100%;

			height: 191px;

			border: 1px solid blue;

			position: relative;

			top: 38.2%;

		}

		.wrap-content{

			width: 100%;

			height: 191px;

			background-color: red;

			position: relative;

			top: -191px;

		}

	</style>

</head>

<body>

	<div class="content">

		<div class="wrap">

			<div class="wrap-content">

			</div>

		</div>

	</div>

</body>

</html>

 分析

利用的原理：

  1. 百分比值的计算方式：实际值 = 具有确定宽高的祖先元素的宽高 * 百分比值。默认情况下，块级元素的宽为100%，高度则是根据内容来计算。所以如果祖先元素没有确定了高度的，那么百分比值也无法确定，它的值会被设置为0。
  2. 如果设置了html元素的高度为height: 100%;那么html元素的高度会随着viewport的高度改变。

css relative设置top为百分比值的更多相关文章

  1. 当padding，margin，top为百分比值，具体数值如何计算

    padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...

  2. 左右margin top问题百分比值

    不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: ...

  3. [译]HTML&CSS Lesson7: 设置背景和渐变色

    背景对网站的设计有重大的影响.它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响. 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变色或者它们的组合.在我们决定如何 ...

  4. CSS设置百分比值的问题

    当给元素设置width:100%:height:100% 的时候没有反应 因为,元素的宽高是根据内容来自动适应的,当设置百分比值时,是根据这个元素的父元素来确定百分比的 如果父元素没有固定的值,那就需 ...

  5. css百分比值到底参考谁？

    一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...

  6. 定位（left 、right 、top 、 bottom）、padding、margin 值设为百分比值时

    定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...

  7. css absolute同时设置top bottom

    css absolute同时设置top bottom 确定div的高度,若设置了左边框,那么这条边框的高度将随着父定位上下文高度的变大而变大 http://www.webfront-js.com/ar ...

  8. 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  9. 巧用margin/padding的百分比值实现高度自适应

    原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...

随机推荐

  1. idea中git回滚到指定分支

    1.git - > show history,选中回滚的指定版本,右击copy revision number 粘出版本号 2.git -> reset hard 出险新页面之后,选中ha ...

  2. 【剑指Offer】58、对称的二叉树

      题目描述:   请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的.   解题思路:   本题判断一棵树是不是对称的,和第18题可以对比分 ...

  3. /proc目录介绍

    1. /proc目录 Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以 ...

  4. Java实验环境搭建

    1.JDK的下载一.JDK的下载及安装 (1).网站网址搜索http://www.oracle.com/technetwork/java,进入浏览页(2)找到Trials and Download 点 ...

  5. [poj1325] Machine Schedule (二分图最小点覆盖)

    传送门 Description As we all know, machine scheduling is a very classical problem in computer science a ...

  6. Linux思维导图之rpm、yum、编译

    yum安装失败: 1.yum client 路径指向不正确:2.yum server 缓存未清理(yum clean all;yum makecache):3.网络不连通

  7. 39.exact value and full text

    主要知识点 1.exact value 2.full text     在es中有两种搜索方式,exact value(精确匹配),full text(全文检索) 一.exact value 比如有一 ...

  8. Keil

    Keil C51 V9.00 即09年发布的最新版本uVision 4,版本外观改变比较大,可以使用以前的注册文件.如果全新安装,在VISTA或者WIN 7系统下,请使用管理员方式运行,然后注册即可无 ...

  9. 学习EXTJS6（1）安装环境

    1.官方下载地址: extjs6 GPL版:https://www.sencha.com/legal/gpl/ sencha cmd:https://www.sencha.com/products/e ...

  10. netty 拆包和粘包 (三)

    在tcp编程底层都有拆包和粘包的机制   拆包 当发送数据量过大时数据量会分多次发送 以前面helloWord代码为例 package com.liqiang.nettyTest2; public c ...