css relative设置top为百分比值
前言：
最近在学习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>
分析
利用的原理：
- 百分比值的计算方式：实际值 = 具有确定宽高的祖先元素的宽高 * 百分比值。默认情况下，块级元素的宽为100%，高度则是根据内容来计算。所以如果祖先元素没有确定了高度的，那么百分比值也无法确定，它的值会被设置为0。
- 如果设置了html元素的高度为height: 100%;那么html元素的高度会随着viewport的高度改变。
css relative设置top为百分比值的更多相关文章
- 当padding，margin，top为百分比值，具体数值如何计算
padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...
- 左右margin top问题百分比值
不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: ...
- [译]HTML&CSS Lesson7: 设置背景和渐变色
背景对网站的设计有重大的影响.它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响. 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变色或者它们的组合.在我们决定如何 ...
- CSS设置百分比值的问题
当给元素设置width:100%:height:100% 的时候没有反应 因为,元素的宽高是根据内容来自动适应的,当设置百分比值时,是根据这个元素的父元素来确定百分比的 如果父元素没有固定的值,那就需 ...
- css百分比值到底参考谁？
一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...
- 定位（left 、right 、top 、 bottom）、padding、margin 值设为百分比值时
定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...
- css absolute同时设置top bottom
css absolute同时设置top bottom 确定div的高度,若设置了左边框,那么这条边框的高度将随着父定位上下文高度的变大而变大 http://www.webfront-js.com/ar ...
- 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
- 巧用margin/padding的百分比值实现高度自适应
原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...
随机推荐
- vs2008 打开项目 无法读取项目文件
卸载vs2015之后 出现问题 C:\Windows\SysWOW64\regedit.exe 64系统运行这个 删除 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\MS ...
- [adb]查看 App的appPackage和appActivity
最近在写app的UI框架,写脚本之前需要知道app的包名和activity,如果获取呢: 需求配置abdrioid sdk环境 方法1:abd log 1. 打开cmd命令窗口2.在命令窗口中输入,a ...
- 在阿里云的ubuntu服务器上安装xampp时出现unable to realloc unable to realloc 8380000 bytes错误
在阿里云的ubuntu服务器上安装xampp时出现unable to realloc unable to realloc 8380000 bytes错误 解决:增加Swap空间(阿里云缺省没有分配任何 ...
- Vue.js大总结
最近回顾了一下Vue.js的基础知识,把认为重要的几个点简单的罗列了出来 vue渐进式的理解 vue可以开发很多插件,可以把很多插件组合到一起,渐进的增加vue的功能 update beforeUpd ...
- 解决windows文件在linux系统中显示乱码的问题
问题: 在Windows下用matlab写的代码(.m)到Linux(centos)下,注释的中文全是乱码. 原因: Windows下默认使用的是GB2312编码,Linux默认使用的是UTF-8. ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- 2019-05-14 Python SSL
解决SSL报错问题 -- 导库 import ssl import urllib.request context = ssl._create_unverified_context() --用urlli ...
- 3.在eclipse中创建Web项目，并部署到Tomcat上
1.找到创建web项目的菜单 2.创建web项目并选择web环境 3.查看创建好的web项目结构 4.在web项目的webContent文件夹下创建jsp页面 5.查看是否创建jsp页面成功,并编辑j ...
- 【学习笔记】关于最大公约数(gcd)的定理
手动博客搬家: 本文发表于20181004 00:21:28, 原地址https://blog.csdn.net/suncongbo/article/details/82935140 结论1 \[\g ...
- firebird的递归查询
with RECURSIVE cte as ( select a.* from PM_PROJECT a where a.pm_id='root_id' union all select k.* fr ...