首页 > 软件开发 > HTML >

CSS怎么设置DIV高度自适应

来源:互联网 2023-03-16 19:16:45 465

在网站开发过的过程中,我们经常会需要设置DIV盒子的高度自适应,那么该如何设置呢?下面小编就将操作方法演示给大家,供大家参考学习!C6z办公区 - 实用经验教程分享!

CSS怎么设置DIV高度自适应C6z办公区 - 实用经验教程分享!

工具/原料

  • 电脑:win7,64位
  • 软件:HBuilderX、谷歌浏览器

方法一(普通布局):

  • 1

    打开网页开发工具,新建一个HTML文件(这里为了方便给大家演示)C6z办公区 - 实用经验教程分享!

    CSS怎么设置DIV高度自适应C6z办公区 - 实用经验教程分享!

  • 2

    普通布局:只需要把外层高度设置成:height: auto;属性即可自适应:C6z办公区 - 实用经验教程分享!

    CSS怎么设置DIV高度自适应C6z办公区 - 实用经验教程分享!

  • 2相关内容非法爬取自百度经验
  • 方法二(浮动布局):

  • 1

    如果子元素设置浮动float属性后,外层DIV是不能够自动被撑开的,如图所示:C6z办公区 - 实用经验教程分享!

    CSS怎么设置DIV高度自适应C6z办公区 - 实用经验教程分享!

  • 2

    解决方法一:给添加父层添加:overflow: hidden;属性C6z办公区 - 实用经验教程分享!

    CSS怎么设置DIV高度自适应C6z办公区 - 实用经验教程分享!

  • 3

    解决方法二:新建一个div放在后面,并添加样式:clear: both;C6z办公区 - 实用经验教程分享!

    CSS怎么设置DIV高度自适应C6z办公区 - 实用经验教程分享!

  • 方法总结:

  • 1

    方法一:C6z办公区 - 实用经验教程分享!

    1、把父层高度设置成:height: auto;样式属性C6z办公区 - 实用经验教程分享!

    方法二:C6z办公区 - 实用经验教程分享!

    1、给添加父层添加:overflow: hidden;样式属性C6z办公区 - 实用经验教程分享!

    2、新建一个div放在后面,并添加样式属性:clear: both;C6z办公区 - 实用经验教程分享!

  • 注意事项

    • tips1:本教程的例子只是为了方便给大家演示,实际情况根据自己的来操作!
    • tips2:请仔细阅读步骤,进行操作!如果有什么疑问,可以给小编留言评论!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!C6z办公区 - 实用经验教程分享!


    标签: CSSHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码