tnblog
首页
视频
资源
登录
愿你出走半生,归来仍是少年
排名
3
文章
317
粉丝
22
评论
14
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以,多总结一点
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

div 自适应高度,自动填充剩余高度

7063人阅读 2019/10/31 17:27 总访问:2161250 评论:0 收藏:0 手机
分类: 前端

方案1:

  1. <div class="outer">
  2.     <div class="A">头部</div>
  3.     <div class="B">下部</div>
  4. </div>

样式:

  1. html,
  2. body { height100%padding0margin0; }
  3. .outer { height100%padding100px 0 0box-sizing: border-box ; position: relative; }
  4. .A { height100pxbackground#BBE8F2position: absolute; top0 ; left0 ; width100%; }
  5. .B { height100%background#D9C666; }

方法2:

  1. <div class="outer">
  2.     <div class="A">头部</div>
  3.     <div class="B">下部</div>
  4. </div>

样式:

  1. html,
  2. body { height100%padding0margin0; }
  3. .outer { height100%padding100px 0 0box-sizing: border-box ; }
  4. .A { height100pxmargin: -100px 0 0background#BBE8F2; }
  5. .B { height100%background#D9C666; }


配合Layui实现如下的布局:

结构差不多就是这个样子

这里说一下,最外面的padding:88是因为,下面的高度50+padding-top的23+padding-bottom的15 = 88


还有那个树形的菜单要想写个距离顶部的间距就在div里边在加一个在写不然就影响到高度自适应的





欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

div+CSS网页布局常用的一些基础知识整理

一.文件命名规范全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print...

干货!div滚动到一定位置就固定他。Vue中实现一侧滚动到底部就固定

尊重原创:转载请注名出处div滚动到一定位置就固定他,例如左边的内容很多,右边的内容很少,如果不处理滚动到一定位置后右...

css div水平居 。文字垂直居中 。flex的方式实现div的垂直与水平居中。布局模板

DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样:效果:可以看到这个div已经居中了但是...

图片在一个div内容水平与垂直居中

图片宽度与高度设置成80%,然后设置margin-top:10%,margin-left:10%就可以了感觉应该没有这么简单哇,不过反正就是可以了,...

div跟随与div拖动

div跟随,就是一个鼠标移动事件html:&lt;divid=&quot;playbox&quot;class=&quot;box&quot;&gt; 不要跟着我 &lt;/div&gt;j...

js键盘移动div与背景滚动效果

通过键盘按下事件记录按键如果按下的时候就去移动div位置,就不能使用组合键了,不能让div斜着走了,所以只做一个按键记录就...

去掉百度编辑器div被替换成p标签

百度编辑器默认会把div替换成p标签,这样我们在编写一些自定义模板的时候就会改变我们的结构,造成一些问题。解决方法:在u...

jquery 获取一个div内容本身的高度

很简单,把内容再加个嵌套,获取嵌套的高度就可以了,嵌套的高度等于内容的高度。举例://假设以下div1是带滑动条的块&lt;d...

div嵌套div自适应增高

div嵌套div里面div一旦使用浮动,外层div是无法自增高的,但是一般只有设置了背景图片才会出现这种问题就像这样可以看到高...

bootstrap div垂直居中

code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;vi...

jquery 找到显示与隐藏的div

jquery 找到显示的divvardivs=$(&quot;div:hidden&quot;);jquery 找到隐藏的div$(&quot;div:visible&quot;);

设置div点击域隐藏div

直接上代码//监听全部全部鼠标事件$(document).mouseup(function (e) { var con = $(&quot;div&quot;); // 设...

layer表格点击事件悬浮div(更新修改一下错误)

效果图首先说说需求,点击表格某一列显示详情layertable有个监听事件event有两种方式触发,第一种是按钮也就是操作一栏,这...

关于点击时悬浮当前位置div部分显示不全问题

//点击触发悬浮div可以看看这篇 :https://www.tnblog.net/15736469932/article/details/5137 t为当前table点击事件的top ...