精华内容
下载资源
问答
  • 方法一: height:auto!important;height:200px;min-height:200px;...在浮动的容器后面,容器结束之前加入一个空的div,并清除浮动。 <div class="father">  <div class="son"&...

    方法一:

    height:auto!important; 
    height:200px; 
    min-height:200px; 

    ie6并不支持min-height。ie7,opera,火狐没有问题。

    方法二:

    在浮动的容器后面,父容器结束之前加入一个空的div,并清除浮动。

     
    <div class="father">
     
      <div class="son">这里是内容</div>
      <div class="son">这里是内容</div>
      <div class="son">这里是内容</div>
      <div class="son">这里是内容</div>
      <div class="son">这里是内容</div>
      <div class="son">这里是内容</div>
      <div class="son">这里是内容</div>
      <div class="son">这里是内容</div>
     
      <div class="clearfloat"></div>
    </div> 
    .clearfloat{clear:both;height:0;} 
     
    可查看链接 http://www.jb51.net/css/140685.html

    转载于:https://www.cnblogs.com/heyiming/p/6385407.html

    展开全文
  • 属性 height: fit-content; 有时候也可以设置width (前提是没有设置width 写死) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="wid.

    在这里插入图片描述

    属性 height: fit-content;  有时候也可以设置width (前提是没有设置width 写死)
    

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
    .box{
        width: 400px;
        height: 600px;
        background: yellow;
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;
    }
    .left{
        flex: 1;
        background: red;
        /* overflow: hidden; */
    }
    .right{
        width: 200px;
        min-height: 200px;
        background: forestgreen;
        height: fit-content;
    }
    </style>
    <body>
        <div class="box">
            <div class="left">
                <ul>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                    <li>111111111111</li>
                </ul>>
            </div>
            <div class="right">
                <ul>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                    <li>1111111111111111</li>
                </ul>
            </div>
        </div>
    </body>
    </html>
    
    展开全文
  • css有办法实现相对定位的父盒子,被有绝对定位的子盒子撑开吗? 前言: 如果是通过百度看到我这篇帖子的朋友,那么恭喜你,你在我这里找到了答案,但是这个答案可能不是你想要的,但是我的方法可以解决你的需求,因为...

    子绝父相(子div绝对定位,父盒子相对定位),父盒子高度自适应

    css有办法实现相对定位的父盒子,被有绝对定位的子盒子撑开吗?

    前言: 如果是通过百度看到我这篇帖子的朋友,那么恭喜你,你在我这里找到了答案,但是这个答案可能不是你想要的,但是我的方法可以解决你的需求,因为这个问题的答案我找了两天!

    首先我们来看需求

    在这里插入图片描述

    上demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=div, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>Document</title>
    	<style>
    		#father {
    			position: relative; // 父相
    			width: 500px;
    			background: #ff3040;
    		}
    		#child {
    			position: absolute; // 子绝
    			top: 100px;
    			left: 100px;
    			width: 200px;
    			background: #ccc;
    		}
    	</style>
    </head>
    <body>
    	<div id="father">
    		<div id="child">
    			未知内容高度 <br/>
    			未知内容高度 <br/>
    			未知内容高度 <br/>
    			未知内容高度 <br />
    			未知内容高度 <br />
    			未知内容高度 <br />
    			未知内容高度 <br />
    			未知内容高度 <br />
    			未知内容高度 <br />
    		</div>
    	</div>
    </body>
    </html>
    

    上效果图

    在这里插入图片描述

    我们会发现父盒子的高度为0,所以没有显示背景颜色
    那么问题来了: 怎么用css实现父盒子的高度自适应呢?

    答: 在实际开发中,父元素的宽度是由里面的子元素撑开的,而绝对定位的子元素由于脱离了父元素文本结构,所以是撑不开父元素的。不但撑不开,而且还会受到父元素宽度的限制。所以,不要想着用定位的子元素去撑开父元素了。

    又要父div自适应,又要子div绝对定位,是没办法做到的因为自适应宽高是需要以文档流布局为基础的,而绝对定位已经脱离了文档流布局了。

    是不是让你失望了?

    没关系 往下看

    使用js 解决 在body结束标签前面加上下面代码

    <script>
    		document.querySelector('#father').style.height = document.querySelector('#child').offsetHeight + 'px';
    	</script>
    

    上图

    在这里插入图片描述

    虽然不完美,但是还是解决了需求!

    展开全文
  • 解决子盒子父盒子撑破问题

    千次阅读 2019-08-04 10:12:57
    场景: <div class="demo">...当你设置子盒子的padding和border的时候就会把父盒子撑破,因为子盒子的宽度是100%,而浏览器的默认盒模型为content-box(即内容为其的宽度) 1.利用box-sizing属性。 原理:...

    场景:

    <div class="demo">(父盒子)

        <div class="box"></div>(子盒子)

    </div>

    当你设置子盒子的padding和border的时候就会把父盒子撑破,因为子盒子的宽度是100%,而浏览器的默认盒模型为content-box(即内容为其的宽度)

    1.利用box-sizing属性。

    原理:改变子盒子的盒模型(即把子盒子的content-box变为border-box)。border-box的宽度会包括content+padding+border

    2.利用calc()属性。【css3d的calc()属性详细讲解见https://www.cnblogs.com/avon/p/5908393.html

    知道总宽度是100%,在这个基础上减去boder的宽度(5px * 2 = 10px),在减去padding的宽度(10px * 2 = 20px),即"100% - (10px + 5px) * 2 = 30px" ,最终得到的值就是div.box的width值:

    .demo {
    	width: 300px;
    	background: #60f;
    	padding: 3px 0;
    }
    .box {
    	background: #f60;
    	height: 50px;
    	padding: 10px;
    	border: 5px solid green;
    width: 90%;/*写给不支持calc()的浏览器*/
    	width:-moz-calc(100% - (10px + 5px) * 2);
    	width:-webkit-calc(100% - (10px + 5px) * 2);
    	width: calc(100% - (10px + 5px) * 2);
    }
    这样一来,通过calc()计算后,div.box不在会超出其容器div.demo的宽度,如图所示
    

    展开全文
  • 元素宽度如何撑开父元素宽度代码效果如下 一个横向滚动栏,元素高度会自动撑开父元素的高度,但是好像元素宽度不能自动撑开父元素的宽度。这是我们需要使用css使元素宽度可以自动撑开父元素宽度,避免计算父...
  • 父盒子无法被子盒子撑开问题

    千次阅读 2019-04-16 14:56:26
    父盒子内有的任一级子盒子有浮动会导致父盒子无法高度自适应(即被子盒子撑开) 原css代码 <style type="text/css"> *{ margin:0; padding:0;} ul{ list-style:none;} .container{ width:100%; ...
  • 无标题文档 .box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;} .div{ width:200px;height:200px;background:red;float:left;} /*  清浮动  1.给父级也加浮动 ... 2....
  • 最开始有如下一张图 大标题看起来离下边框太近了,所以想利用h4标签的padding-...没有设置padding时,父盒子子盒子的大小如下: 给h4标签添加padding-bottom:10px;属性之后,显示结果如下: 可以看到父盒子的...
  • 清除浮动的方法本质分为两种,一种为额外标签法,一种父盒子加overflow。 额外标签法又有两种情况。 父级盒子加一个空元素 <div class="father"> <div class="son"></div> <div ...
  • 1.当父盒子不给高度宽度的时候,默认由子盒子撑开父盒子的大小,相当于子盒子和父盒子此时是重叠在一起的 2.当父盒子给了宽高,如果子盒子的大小超出了父盒子,子盒子就会溢出
  • 无标题文档 .box{ width:300px;margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;} .clear{ height:0px;font-size:0;clear:both;} /*  清浮动  1....
  • 子元素未定时,父盒子宽高为0,其宽高能由子盒子撑开。 定位时,父盒子高度无法被撑开。 定位子元素与浮动一样,脱离文档流,无法撑开父盒子的高度 ...
  • 今天项目的组件遇到一个隐藏的样式bug。该组件大概是这样设计,左中右结构,左侧放置标题,中间放置显示内容,右侧放置图标之类的,如下图。...当中间内容过长的时候,把会row-item的宽度给撑开,这就造成了...
  • 我发现有个盒子的高度不会被子盒子撑开,即便加了 height: initial; min-height: fit-content; 也不行,除非给个最小高度数值, 我没有用浮动,显然不是浮动的问题, 后来发现原来是因为这个盒子的父级用了flex ...
  • 父盒子中,被内容撑起来高度后,另一个子元素没有继承到高度的时候怎么办? 因为内容是不固定的,所以当时想的是既然文字部分能把父元素撑起来,那么橙色的子盒子高度百分百了之后,是可以显示出来的, 但是,我...
  • CSS解决元素撑开父元素,父元素背景色无法铺满全屏文题 上干货!!! 假设父元素撑开整个页面背景色为蓝色,元素背景色为粉色,高度撑开了父元素,出现滚动条,此时父元素背景色无法铺满,会出现白边 出现的问题...
  • 元素定位时,无法撑开父元素,因为此时元素已脱离文本流 实现任意元素垂直水平居中方法(单个居中同理): position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 移动元素自身高宽的一半,...
  • flex 布局内容被撑开 遇到的问题: 需要显示的文本是通过富文本编辑器提交是文本(包含了p标签),展示时通过flex布局实现。如下图: 但是通过flex布局实现后发现文本内容过长时将后半部分整体撑开了,导致整个...
  • 方法一:为元素设置border 方法二:为元素添加overflow:hidden;样式 方法三:为元素或者元素声明浮动 方法四:为元素或者元素声明绝对定位 ...
  • 给父级元素添加overflow:auto;
  • 第一种:在浮动结束的容器后面加上这段代码&lt;div style=”clear:both;”&gt;&lt;/div&gt;意思是清除浮动。第二种:在外层DIV,也就是这里的DIV1的CSS里面加入以下CSS代码overflow: auto;...
  • 今天遇到一个问题就是我在突发奇想方案尝试对一个父盒子中的一个子盒子水平垂直居中 <div class="fu"> <div class = "zi"> </div> </div> <style> .zi{ with:45px; height:45...
  • 1.元素开启绝对定位,元素开启相对定位 2.元素设置left、right、top、bottom属性都为0,margin为auto 或者 (注意2、3步二选一) 3.元素left设为50%,top设为50%,margin-left设为 -元素的width/2px,...
  • 1、鼠标移动到子盒子上,浏览器默认鼠标离开父盒子了所以打印“移出”,但是已经移到子盒子中,在子盒子中有移入事件,但是没有事件对应函数,然后事件冒泡给了父盒子父盒子有mouseover事件对应函数,所以打印了...
  • 父盒子min-height属性子盒子100%没有高度 问题 ​     同事写一个loading组件,但是设置高度的时候,在父盒子设置最min-height,设置子盒子高度100%;但是发现子盒子的高度和父盒子的高度并不...
  • 我一直很困惑绝对定位后父盒子的高度会变为0,如何让绝对定位的元素撑开父盒子呢? 我在StackOverflow上找到的高分解决方案如下: Absolutely positioned elements are completely removed from the document flow, ...
  • <div class=“a”> <div class=“b”> <div class=“c”>内容内容,很长的内容</div>...给a设定一个固定宽度,并设定overflow:scroll,使其出现横向滚动条,但文字内容会自动换行,为了不...
  • 纯粹的CSS无法实现。因为position:absolute就是脱离文档流,怎么能让元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取元素的高度,赋值给元素。 在这里插入代码片 ...
  • CSS元素浮动元素自动撑开

    千次阅读 2018-05-08 10:34:18
    一般是父盒子中的子盒子使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 如下图所示: &amp;lt;div style = &quot;border:1px solid black;&quot;&amp;gt; &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,240
精华内容 2,496
关键字:

子盒子撑开父盒子