外层div自适应内层div高度

最近在做项目的时候,写jsp页面,在显示一些数据时不知道数据的多少,这时候就需要外层div自适应内层div的高度。

在网上找了些方法,也是本人现在用的解决方法,这里只介绍一种,当然还有很多种解决方法。

  如:

1 <div id="div_1">
2     <div id="div_1_1"></div>
3     <div id="div_1_2"></div>
4     <div id="div_1_3"></div>
5 </div>

  div_1_2和div_1_3的高度固定不变,div_1_1的高度是变化的,要让div_1自适应其子div的高度,解决方法:

    1.设置div_1_1的最小高度:min-height

    2.在div_1_3后面加一个div: <div style="clear: both;display: none;"></div>

    3.设置div_1的最小高度:min-height(等于:div_1_1的最小高度 + div_1_2的高度 + div_1_3的高度 ),这样div_1_1高度变大时,div_1的高度会自适应高度变化。

  

时间: 2024-11-05 02:20:53

外层div自适应内层div高度的相关文章

外层div随内层div高度自适应

首先说一下textarea的高度随文字的内容自适应,用div模拟textarea.直接看代码.其中 contenteditable="true"表示div可以编辑..主要是设置 overflow: auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

外层div高度不随内层div高度改变的解决办法

当b1和b2都是float=left时候,a1层的高度不会被b1和b2的高度撑开. <div id=“div1″> <div id=”div2″ style="float:left;height:200px;"></div> <div id=”div3″style="float:left;height:200px;"></div> </div> 解决方法一:设置div1的display属性为ta

关于层DIV自适应高度的问题总汇

我们先来看一个最普通的父层自适应子层高度的例子(通常来讲,布局时父层都是不设置高度的) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .f{ width:200px; border:1px solid #000; padding: 25px; margin: 50px auto;} .z{ w

[CSS][转载]内层div的margin-top影响外层div

参考 内层div的margin-top影响外层div——引出外边距合并 div嵌套导致子区域margin-top失效不起作用的解决方法 我使用的是在外层的div中添加 border: 1px solid transparent; 在上面参考方法中,给外层div 添加"overflow:hidden;"也实现了同样的效果.

jquery实现div自适应浏览器高度

<!DOCTYPE html><html><head><meta charset=UTF-8 /><title>jquery实现div自适应浏览器高度(宽度)</title><meta name="keywords" content="html5" /><meta name="description" content="html5 test&quo

如何设置自适应当前浏览器高度的div块

嗯 就是下面这样 <!DOCTYPE html> <head> <title>adaptive this page size</title> <script type="text/javascript"> function adpaHeight() { var bodyHeight = document.documentElement.clientHeight; //获取当前浏览器宽高 document.getElementB

内层div/table的margin-top影响外层div

.inner-table { tbody{ tr:nth-child(odd) { background-color: #ffffff; } tr:nth-child(even) { background-color: #f9f9f9; } } margin: 20 auto; width:90%; } div.mini-table{ background-color:#ebf5fd; /*overflow:hidden; 可以避免外边距合并但影响箭头显示*/ position:relative

DIV相关的操作总结: DIV居中,DIV自适应高度

http://www.cnblogs.com/scy251147/p/3391228.html 父DIV自动匹配子DIV高度的方法 DIV居中或者居底的方法 DIV最小高度及自适应方法: 需要给DIV块一个最小高度,但是当DIV内部内容超过最小高度的时候,需要DIV能够随着高度的增加而增加.这个时候,我们就可以利用_height和min-height属性来解决.

如何让高度自适应的div中的文字水平垂直居中

1.在做数据展示的时候,因为后台没有数据,为了提示用户没有数据,自己手写了一个div中间显示一个"暂无数据的字样", 然后控制显示和隐藏,这样方法有两种: 第一种:设置display隐藏,但有一个问题,因为我的div中用了display:table-cell,所以起了冲突, 第二种:更改z-index的值 不显示的时候设置0,显示的时候设置最大值就行(推荐使用) 本文主要是探讨,因为外层的div的宽度和高度是不固定,导致了文字不能水平垂直居中的问题,解决办法: #big{ width: