精华内容
下载资源
问答
  • 最近做了个项目,其中有项目需求是需要div根据内容进行宽度自适应。下面小编给大家分享一段代码关于CSS 实现div宽度根据内容自适应 的相关知识,需要的朋友参考下
  • Div即父容器在Firefox、Chrome、Safari中不会根据内容自动调节高度,我们看下面的HTML代码: <divid="main"><divid="content"></div></div> 当Content内容很多时,即使main设置了...

    Div即父容器在Firefox、Chrome、Safari中不会根据内容自动调节高度,我们看下面的HTML代码:

    <divid="main"><divid="content"></div></div> 

    当Content内容很多时,即使main设置了高度100%或auto。在除IE外的其他浏览器中还是不能完好的自动伸展。也就是说,内容的高度容器main的高度还是没有自动撑开。

    我们有三种方法可以解决这个问题。

    一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。Html代码如下:

    <divid="main"><divid="content"></div><divstyle="font: 0px/0px sans-serif;clear: both;display: block"></div></div> 

    二,增加一个容器,在代码中存在,但在视觉中不可见。Html代码如下:

    <divid="main"><divid="content"></div><divstyle="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div></div> 

    三,增加一个BR并设置样式为clear:both。Html代码如下:

    <divid="main"><divid="content"></div><brstyle="clear:both;"/></div> 

    转载于:https://www.cnblogs.com/lxboy2009/p/5212054.html

    展开全文
  • 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容高度比较高了,但容器main的高度还是不能撑开。
  • 但是这个百分比是根据父级的高度来计算的,根本不是根据元素自身的宽度,那么就做不到Div的宽高达成一定的比例=-=)。 要实现这种功能(div高度:宽度=1:1),通过各种加Buff,得知有以下几种处理方式 1,直接指定...
  • NULL 博文链接:https://xnbhnly.iteye.com/blog/1312073
  • 希望DIV高度会随着内容的变化而变化,但是又想设置DIV的一个最小高度,特别是当DIV有背景色或背景图片时最小高度的设置会使视觉效果更好
  • 示例: ...div class="lei"> <p>电脑</p> <ul> <li><b>台式电脑</b></li> <span>3666.00</span> </ul> <ul>...

    示例:
    HTML中:

    <div class="lei">
        <p>电脑</p>
        <ul>
            <li><b>台式电脑</b></li>
            <span>3666.00</span>
        </ul>
        <ul>
             <li><b>笔记本电脑</b></li>
             <span>4888.00</span>
        </ul>
    </div>
    

    CSS中:

    .lei{width: 96%; border: 1px solid #DDDDDD; margin: 0.6rem auto; border-radius: 0.3rem; color: #666666; padding-bottom: 0.6rem;}
    .lei p{margin: 0.6rem 2% 0.3rem;}
    .lei ul{ width: 15%; text-align: center; margin: 0.3rem 0 0 1.4%; border-radius: 0.3rem; float: left; background: white;}
    .lei ul li{height: 2rem; line-height: 2rem; list-style: none;}
    .lei ul span{font-size: 0.6rem; display: block; height: 3rem; line-height: 1rem; overflow: hidden; text-align: left; padding-left: 3%;}
    

    出现问题:
    .lei 的高度只包含了 p 标签的高度, ul 标签都显示在 .lei 外面。

    解决办法:
    给 .lei 添加了 overflow: auto 或 overflow: hidden 即可使 .lei 的高度包含 p 和 ul 。

    注意:
    原理未知,如有知道的麻烦留言告知,谢谢!

    展开全文
  • Div高度自适应内容高度之最简处理

    万次阅读 2019-08-09 19:40:44
    1.首先确定这个div是block。默认情况下,div是block,不是就设置display:block; 2.div不要设置高度,设置overflow:hidden;

    1.首先确定这个div是block。默认情况下,div是block,不是就设置display:block;

    2.div不要设置高度,设置overflow:hidden;

    展开全文
  • 后面只需设置minHeight属性或者干脆minHeight属性也不去设置,再保证div是块级元素或绝对/固定位置的元素,这样div就会根据内容自适应高度了。除非有特殊需求否则还是建议自适应高度需要设置minHeight和maxHeight,...

     这里以自适应高度为例。先要设定好div的width,不用设置div的height属性。后面只需设置minHeight属性或者干脆minHeight属性也不去设置,再保证div是块级元素或绝对/固定位置的元素,这样div就会根据内容自适应高度了。除非有特殊需求否则还是建议自适应高度需要设置minHeight和maxHeight,因为无限制的自适应总会让人担心到时拿到的数据是否合乎规范。

    minWidth 属性设置或返回元素的最小宽度,属性只在块级元素或绝对/固定位置的元素发挥作用。
            length     使用 px、cm 等单位定义最小宽度。默认是 0。
            %     定义最小宽度为父元素的百分比。
            inherit     minWidth 属性的值从父元素继承。

    maxWidth 属性设置或返回元素的最大宽度,属性只在块级元素或绝对/固定位置的元素发挥作用。
            none     默认。元素的宽度没有限制。
            length     使用 px、cm 等单位定义最大宽度。
            %     定义最大宽度为父元素的百分比。
            inherit     maxWidth 属性的值从父元素继承。

    minHeight 属性设置或返回元素的最小高度,属性只在块级元素或绝对/固定位置的元素发挥作用。

    maxHeight 属性设置或返回元素的最大高度,属性只在块级元素或绝对/固定位置的元素发挥作用。

    简单列表自适应的例子
    示意图

    // 数据
    var dataArr = new Array();
    for (var i = 0 ; i < 100 ; i ++) {
        var tempDict = {
            "area":"第一工区",
            "ym":"2020/12",
            "time":"2020-12-05",
            "title":"工作计划"+String(i),
            "plan":"目标产值:30万",
            "person":"张三"+String(i)
        };
        if (i == 1 || i == 3) {
            tempDict = {
                "area":"第一工区",
                "ym":"2020/12",
                "time":"2020-12-05",
                "title":"工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作工作计划工作计划工作计划工作计划工作计划工作"+String(i),
                "plan":"目标产值:30万",
                "person":"张三"+String(i)
            };
        }
        dataArr.push(tempDict);
    }
    
    // 列表
    for (var i = 0 ; i < dataArr.length ; i ++) {
        var tempDict = dataArr[i];
        var listDiv = document.createElement("div");
        listDiv.style.backgroundColor = "white";
        listDiv.style.width = "100%";
        listDiv.style.minHeight = "70px";
        listDiv.style.maxHeight = "200px";
        listDiv.style.marginTop = "10px";
        listDiv.style.zIndex = "0";
        listDiv.style.overflow = "hidden";
        baseDiv.appendChild(listDiv);
    
        // 工区
        var tempArea = document.createElement("div");
        tempArea.style.width = "64px";
        tempArea.style.height = "64px";
        tempArea.style.border = "1px solid red";
        tempArea.style.borderRadius = "32px";
        tempArea.style.marginLeft = "10px";
        tempArea.style.marginTop = "10px";
        tempArea.style.float = "left";
        listDiv.appendChild(tempArea);
    
        var tempAreaName = document.createElement("p");
        tempAreaName.innerText = tempDict["area"];
        tempAreaName.style.display = "inline";
        tempAreaName.style.fontSize = "13px";
        tempAreaName.style.fontWeight = "bold";
        tempAreaName.style.position = "relative";
        tempAreaName.style.top = "8px";
        tempAreaName.style.left = "5px";
        tempArea.appendChild(tempAreaName);
    
        var tempAreaTime = document.createElement("p");
        tempAreaTime.innerText = tempDict["ym"];
        tempAreaTime.style.display = "inline";
        tempAreaTime.style.fontSize = "13px";
        tempAreaTime.style.color = "gray";
        tempAreaTime.style.position = "relative";
        tempAreaTime.style.bottom = "-5px";
        tempAreaTime.style.left = "5px";
        tempArea.appendChild(tempAreaTime);
    
        // 内容父视图
        var tempListContentView = document.createElement("div");
        tempListContentView.style.height = "100%";
        tempListContentView.style.display = "table";
        tempListContentView.style.listStyle = "none";
        tempListContentView.style.paddingTop = "10px";
        listDiv.appendChild(tempListContentView);
    
        // 标题
        var tempContentTitle = document.createElement("div");
        tempContentTitle.innerText = tempDict["title"];
        tempContentTitle.style.fontSize = "15px";
        tempContentTitle.style.display = "list-item";
        tempContentTitle.style.position = "relative";
        tempContentTitle.style.left = "10px";
        if (i == 1) {
            tempContentTitle.style.height = "20px";
            tempContentTitle.style.overflow = "hidden";
        }
        tempListContentView.appendChild(tempContentTitle);
    
        // 负责人
        var tempPerson = document.createElement("div");
        tempPerson.innerText = "工区负责人:"+tempDict["person"];
        tempPerson.style.fontSize = "13px";
        tempPerson.style.position = "relative";
        tempPerson.style.left = "10px";
        tempListContentView.appendChild(tempPerson);
    
        // 目标产值
        var tempMBValue = document.createElement("div");
        tempMBValue.innerText = tempDict["plan"];
        tempMBValue.style.fontSize = "13px";
        tempMBValue.style.position = "relative";
        tempMBValue.style.left = "10px";
        tempListContentView.appendChild(tempMBValue);
    
        // 时间
        var tempTimeLab = document.createElement("div");
        tempTimeLab.innerText = tempDict["time"];
        tempTimeLab.style.fontSize = "13px";
        tempTimeLab.style.position = "relative";
        tempTimeLab.style.left = "10px";
        tempTimeLab.style.height = "30px";
        tempListContentView.appendChild(tempTimeLab);
    
        // 清除浮动
        // var cleanFloat = document.createElement("div");
        // cleanFloat.style.clear = "both";
        // cleanFloat.style.height = "0px";
        // cleanFloat.style.lineHeight = "0px";
        // cleanFloat.style.fontSize = "1px";
        // listDiv.appendChild(cleanFloat);
    }

     

    展开全文
  • DIV自动适应高度

    2013-09-13 11:20:26
    DIV自动适应高度,设置三个DIV高度始终保持一致,不管其中哪个高度变化都会保持DIV向最高的看齐
  • 先引入一个jquery文件,然后建立两个DIV: &lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="DIV1"&gt;&lt;/...
  • 然而实际中很多人的做法是通过js根据初始比例计算改变宽度后的高度,再应用到div上,有的甚至是直接就写死高度,宽度无论如何变化,高度都是这个样子,就会造成宽屏下,div显得矮胖,窄屏幕下,div显得瘦高。...
  • 首先确保这个div是不是是block。默认情况下,div是block。可能在设置某些css样式的时候更改了也不一定。 ...不设置他的高度,设置它的overflow:hidden属性就可以自适应内容了。 good ...
  • JS来控制div高度的自适应,html中有多个div,div需要根据屏幕和浏览器的高度实现高度的自动变化,div嵌套的有 iframe ,iframe用来展示网络资源内容。 其主要JS代码如下: function resizeHeight(id,size){ var ele ...
  • 我的桌子高度为100%,高度为100%.我把td的边界设置成可以看到的东西.我看到td是预期的100%.我把一个div放在那个td里,把它设置为100%.在Chrome中是100%.在Firefox中不是100%.我该如何解决?例body,...
  • div自动宽度,怎么让里面的文字自动换行从网上找了一下,下面的内容可以参考 兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:...
  • div 自适应高度 自动填充剩余高度

    千次阅读 2020-01-10 16:04:18
    div 自适应高度 自动填充剩余高度 知道A的高度, 给B剩余 方案1: Html: <divclass="outer"> <divclass="A"> 头部DIV </div> <divclass="B">下部DIV </div> </div> CSS:...
  • 当浏览器是IE6时 DIV高度固定 当内容超出固定值 DIV会自动适应高度但是当我们用IE7、8或者其他主流浏览器时 会发现DIV高度就不那么听话了 ,内容会超出 DIV显示在外面 大大影响视觉效果。所以使用一下代码可以很...
  • 内容高度比较高了,但容器main的高度还是不能撑开。  我们可以通过三种方法来解决这个问题。  一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。        二,...
  • 该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了)。 利用js来实现...
  • div 加overflow:hidden;height:auto; 子div 浮动float <div sytle="overflow:hidden;height:auto;"> <div sytle="float:left;"></div> <div sytle="float:left;"></div> <...
  • 在进行网页开发时,可能会遇到这样的情况,网页中的内容会超出你原先设置的高度或者宽度,这时就需要实现高度自适应或者宽度自适应,下面这篇文章将给大家来介绍关于css高度自适应。PS:css宽度自适应的介绍内容,...
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;...纯CSS实现Div高度根据自适应宽度(百分百调整)&lt;/title&gt; &lt;/head&gt; &lt;style&am
  • 但是这个百分比是根据父级的高度来计算的,根本不是根据元素自身的宽度,那么就做不到Div的宽高达成一定的比例解决方法通过padding来实现此功能,宽度的自适应是根据viewport的width来调整的,比如{width:50%}就...
  • 实现div可以调整高度(div实现resize)一、div 实现resize(类似textarea)代码如下:div实现textarea效果#textarea {height: 200px;width: 300px;padding: 4px;border: 1px solid #888;resize: vertical;overflow: auto...
  • 一、功能需求: 给三个div盒子,实现对处于中间的div盒子隐藏多余内容。此时配置一个show按钮,当...对中间的div设置一个max-height高度+overflow:hidden属性+display:inline-block属性; 用js获取show按钮和处于中间
  • .css('height',高度): $('.content').css('height',$('.ibox-content').css('height')); //调整高度 记得在div定义class

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,998
精华内容 11,999
关键字:

div高度根据内容自动适应