今天在做导航条时,由于想要居中导航栏(子div),使用了float,导致父div高度塌陷,样式都没用,具体看下图:

结构大概是这样:

nav是导航栏子div,使用了float:left,header是父div,我在父级中设置width 100%,背景颜色不能铺满

开始以为清除浮动就行了,试了各种清除浮动技术,弄了很久都没用,后来才发现是很简单的问题

原来是width:100%是需要父级width是有有效高度

所以我设置了header父级(body)的高度也为width:100%,解决问题!


很简单的问题,弄了很久,还是不够细心啊!有错大佬欢迎指正!

子div浮动,父div宽度设置100%相关推荐

  1. 子div在父div中置底

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 用纯CSS让子DIV自适应父DIV的高度

    我们在前端布局时经常使用栅格布局,而当栅格布局中的某个子元素高度发生变化,外层的父元素高度也会发生变化,如果此时想让其他子元素的高度依旧填充父元素,我们应该怎么做. 这是HTML部分代码,此时左侧的高 ...

  3. 如何强制子div为父div的高度的100%而不指定父级的高度?

    我有一个具有以下结构的网站: <div id="header"></div><div id="main"><div i ...

  4. 子div在父div中上下左右居中

    在父div中使用 align-items: center; 子div使用 text-align: center;

  5. div超出不换行_子div超出父div部分横向滚动,不换行

    父div: .rootBar{ width: 1920px; height: 216px; float: left; overflow-y: hidden; overflow-x: auto; whi ...

  6. input textarea 宽度设置100%不超出父元素

    <div style="padding-left: 10px;padding-right: 10px;"><textarea style="width: ...

  7. 怎么让子div相对父div居中显示

    方法1:.parent {width:800px;height:500px;border:2px solid #000;position:relative; }.child {width:200px; ...

  8. html安卓手机打开后只有半屏,宽度设置100%在移动端时变成一半

    html代码: 手机 电脑 DIY 数码 外设 智能 css代码: .nav-body{ position: relative; overflow: hidden; width:100%; heigh ...

  9. 解决div宽度设置width:100%后再设置padding或margin超出父元素的办法

    前言: 有时候我们需要子div和父div一样宽(高),但是需要设置一定边距时,如果子元素使用width:100%在设置padding或margin的话,就会出现溢出问题. HTML <div c ...

最新文章

  1. Nat. Commun | 结合二维深度神经网络和迁移学习 预测RNA二级结构
  2. go语言学习(一)——go语言简介和环境搭建
  3. DPM系列之一:安装dpm与attach dpmagent
  4. NSLog(@%@,类对象); 默认输出类名
  5. 帆软报表(finereport)点击事件对话框打开
  6. java三元组的快速转置_矩阵压缩——三元组以及矩阵快速转置程序实现
  7. csol战损左轮python_CSOL2017年9月12日更新维护到几点
  8. RHEL6入门系列之三十一,管理计划任务
  9. 学习微软企业库存心得--总结
  10. Linux镜像下载及虚拟机中安装
  11. 【NOIP2013提高组】货车运输
  12. NOI题库答案(1.2 编程基础之变量定义、赋值及转换)
  13. 微信小程序----实现YDUI的ScrollTab(滚动选项卡)
  14. python:series详解和数据获取
  15. 创建网页文件html,HTML快速入门之创建网页文件
  16. gif验证码识别,gif动态验证码识别
  17. QQ群实名登记。。。
  18. 创建会计凭证保存前BTE增强
  19. LightOJ 1395 A Dangerous Maze (II) 期望DP
  20. 史上最简单-在 windows+python3.6 环境下创建自己的YOLOv3 [ VOC2007 ] 数据集

热门文章

  1. 上海无纺布制造商【盈兹】申请纳斯达克IPO上市,募资1100万美元
  2. 麻将普通胡牌算法JS版(含癞子,非轮训)
  3. access查询女教师所有的信息_ACCESS2007查询操作案例详解
  4. JavaWeb总结(常见笔面试题)
  5. CVAT——2. CVAT简单使用
  6. FPGA学习日志——无源蜂鸣器beep
  7. tkinter.ttk — Tk themed widgets
  8. 抓包分析php一句话木马
  9. 使用yum -y install xxxx时会出现错误的解决办法
  10. 关于联想y7000P电脑有线和无线网自动断掉且需要重启才可以连接的问题