div 如何设置高度

现在的html或者jsp网页的开发很流行,其中会用到一个标签叫做div。
今天,小编想在这边给大家介绍一些关于div设置高度的方法

操作方法

  • 01

    div设置高度大致可以分为3个方法,方法可以分为以下几种: 1、style中直接写明固定高度 2、class形式调用 3、自适应高度

  • 02

    首先,小编给大家介绍第一种方法,固定高度法。 固定高度的写法是在div标签中,加上style属性,并在属性中的height属性中写明固定的高度,如style="height:300px;" 具体代码见附录的图片

  • 03

    这是固定高度写法的运行的效果图,没怎么做样式,表现形式不太好

  • 04

    接着,给大家介绍第二种方法class形式调用。 class形式调用需要在head标签下的style标签中写上css样式,然后在div中以class形式调用即可。 代码如下图

  • 05

    这是class形式调用+固定高度写法结合的运行效果,见下图

  • 06

    方法三、自适应高度写法。 所谓自适应高度,即相对于父标签或者父容器的高度,以百分比形式来写,这样会随着父容器的高度变化而自适应变化。 例子代码见下图

  • 07

    自适应方法的一个运行结果,可以看出蓝色虚线框有部分露出来黑色实线框的外部。这是因为两个div的高度之和大于了父容器的高度了。

  • 08

    修改了自适应的高度的比例后,请参看下面的效果图。 在这里,我把高度的相对比例换成了70%。

  • 09

    最后附录上全部的代码文件图片,仅供参考

(0)

相关推荐

  • div透明度设置怎么弄

    目前,DIV+CSS来制作网页是非常流行的.如何设置div透明度,以使网页变得更加漂亮呢?接下来我简单讲解下. 操作方法 01 1.样式代码 #layout { position:absolute; ...

  • div怎么设置圆角边框

    我们在开发前端页面的时候,经常会使用到按钮或者div做的按钮,那么我们就会给这个按钮的四个角做一些角度,让div变的更好看,更符合审美一点,那么怎么才能将div设置成圆角呢? 设置四个角的圆角 01 ...

  • div 怎么设置背景图片

    这里小编主要用到CSS的一些属性,小编做前端时也是经常用到设置背景图片的问题,那么小编说一些自己常用的方法 操作方法 01 首先创建一个html文件一个css样式表文件,如图 02 在html文件中创 ...

  • div怎么设置背景图片

    div是html中的基础元素之一,运用div的时候,为了美观经常会给它添加背景图片.下面小编就给大家分享一下如何给div添加背景图片. 操作方法 01 首先我们打开sublime text软件,新建一 ...

  • 用H5制作仿淘宝商品列表教程

    我们在浏览淘宝首页的时候,在页面的左边会看到一个商品列表项,包括标题文字,列表小图标等.下面就让我们一起来制作仿淘宝首页商品分类列表. 操作方法 01 首先我们在<body>里面定义一个大 ...

  • css如何根据屏幕宽度设置div高度

    css如何根据屏幕宽度设置div高度 操作方法 01 首先创建或者打开我们的web项目,新建一个html文件和css文件即可,如图所示 02 html页面代码如图所示,定义一个div,然后给一个id属 ...

  • CSS中如何设置div的边框

    您可以根据自己的需要,对div进行设置它的边框样式,或是隐藏掉div的边框.而在开发过程中,您如果使用得当div,它将给您的开发带来很大的便捷. 操作方法 01 首先,您需要创建一个div,对div进 ...

  • css样式如何设置div元素水平垂直居中的三种方法

    CSS实现绝对定位元素的居中效果,有时候需要把一个元素进行居中,在这里讲解三种方法,各种方法有它的优缺点. 操作方法 01 1.建立txt文档,更改后缀名为html,如图: 02 2.右击html文件 ...

  • css div自适应高度height

    操作方法 01 DIVCSS5为大家介绍两种情况下自适应高度样式设置与解决. 第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度: 第二种:没有最小高度,DIV完全自适应高度. 以下 ...