如何用CSS实现div元素高度相对于整个屏幕100%

通常情况下，我们要实现左侧导航相对于右侧内容区域，高度能够充满整个屏幕。下面介绍一种用CSS实现的方法，如图：

实现方法很简单，直接上代码：

<div style="position: absolute;top: 0;left: 0;bottom: 0;border:solid 1px #333;"><div style="float: left;height:100%;border:solid 1px #333">left</div><div style="float: left;height:100%;border:solid 1px #333">right</div>
</div>

只需在外层父元素中添加上absolute的属性，并且top,bottom都设为0。

如何用CSS实现div元素高度相对于整个屏幕100%相关推荐

css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100％？
css div撑满窗口高度 Introduction: 介绍: Hello there developers! Well, certainly if you are reading this arti ...
如何用css实现div高度自适应占满屏幕
如何用css实现div高度自适应占满屏幕不能使用准确的px值,应该用%作为尺寸的单位. 在样式表中将html,body的高度height设置为100% 在要需要站满屏的div设置width:100% ...
CSS内容超出元素高度滚动，并且滚动条隐藏
CSS内容超出元素高度滚动,并且滚动条隐藏给父元素设置宽度,溢出隐藏,子元素设置 // html <div class="box"><div class=&qu ...
js获取div元素高度和宽度的方法
前端web页面中,js可以很方便的获取div元素的高度和宽度,那么这篇文章就说一说原生JS与JQ如何快速的获取DIV元素的高度和宽度的方法. js获取div元素高度与宽度的方法 js获取div元素的高 ...
CSS技能点--元素高度占满视窗
点此查看全部文字教程.视频教程.源代码本文目录 1. 背景 2. CSS设置满屏 1. 背景我们经常会遇到,需要将网页内容铺满当前窗口的需求. 很多时候,通过CSS去控制比较麻烦,尤其是窗口高度是 ...
设置vh使div元素高度充满屏幕
在做项目的过程中老师要求要让div元素充满整个屏幕,之后查资料发现vh和vw,就做一个简单的介绍 1.vh css3新单位,view height的简写,是指可视窗口的高度.1vh=视窗高度的1%,h ...
在HTML中让边框变透明,如何用CSS设置DIV边框透明
如何实现用CSS设置DIV边框为透明呢?我们来看一看. 工具/材料电脑操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 ...
css实现div的高度随着另一个div的高度改变
有如下代码 <div class="parent"> <div class="left"></div> <div cl ...
CSS | 使一个元素高度由图片撑开
需求: 期望左边的高度由右边的图片决定,因此右边的元素需要由右侧的图片来撑开,但是开发时发现出现了以下问题: 右侧的元素没有被图片撑开,而是比图片多了一些距离. 解决 <div stlyle=& ...
css 让div 的高度和屏幕的高度一样
<html> <head> <title>无标题文档</title> <style type="text/css"> h ...

如何用CSS实现div元素高度相对于整个屏幕100%

如何用CSS实现div元素高度相对于整个屏幕100%相关推荐

最新文章

热门文章