首页 > 代码库 > div自动撑开（或者自适应）

div自动撑开（或者自适应）

2024-07-09 12:04:09   223人阅读

　　<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现（摘自W3C school）。在编写页面的时候（这里是指jsp），有遇到div标签不能随着内部的内容扩充本身大小的情况，借助div标签的height和overflow属性，可以完美解决问题。

情况一：布局的时候设定了div的宽度和高度，但高度不够：

    <div style="width: 800px;height:150px;background-color: gray;margin: auto">        <div style="height: 50px;width: 200px;background-color: red;float: none">red</div>        <div style="height: 40px;width: 250px;background-color: green;float: none;display: block">green</div>        <div style="float: left;margin-left: 10px;margin-top: 10px">            <table border="5" bordercolor="greenyellow" style="width: 300px;height: 100px;">                <tr>                    <td style="border: 2px solid greenyellow;padding: 0px;" align="center" width="200">                        aaaaaaaaaaaaaaaaa                    </td>                    <td style="border: 2px solid blue;padding: 0px;" align="center">                        bbbbbb                    </td>                </tr>            </table>        </div>    </div>

　　实际效果如下（firefox上）：

图一

将最外围的div的height设置为auto，就能解决问题：

图二

　　overflow属性则是用来控制超出容器边框范围的内容的显示方式，允许的取值有：

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

　　默认取值是visible，这就是为什么图一中table超出div的部分还是显示出来，但是div本身大小没有改变。如果不想改变div的高度，可以设置overflow为auto，效果如下：

图三


联系
我们