高度自适应,内容是浮动元素

可以有两种方法:

1.添加overflow:hidden;

2.添加伪元素

<style>

  .wrap{
    border:1px solid blue;
    width:600px;
    margin:0 auto;
    padding:20px 0;
  }
  .main{
    float:left;
    background:pink;
    width:350px;
    height:100px;
  }
  .side{
    float:left;
    background:rosybrown;
    width:200px;
    height:100px;
  }
  .wrap:after{
    content:‘‘;
    display:block;
    height:0;
    clear:both;
  }
</style>

<div class="wrap">

  <div class="main"></div>

  <div class="side"></div>
</div>

时间: 2024-10-12 16:25:19

高度自适应,内容是浮动元素的相关文章

iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求.当内容是未知或者是变化的时候.这个时候又有几种情况了. iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度.常用的兼容代码有: function setIframeHeight(i

解决各种情况下的iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用.如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求.当内容是未知或者是变化的时候.这个时候又有几种情况了. iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度.常用的兼容代码有: // document.domain = "caiba

实现textarea高度自适应内容,无滚动条

最近接触到一个很好用的js插件,可以实现textarea高度随内容增多而改变,并且不显示滚动条,推荐给大家: http://www.jacklmoore.com/autosize/

swift webView的高度自适应内容

废话不多 直接上代码 //在webView的协议方法里实现以下代码 func webViewDidFinishLoad(webView: UIWebView) {//加载完成 //        self.view.addSubview(webView) webView.scrollView.mj_header.endRefreshing() self.mainView.removeFromSuperview() //计算webView内容的高度 然后去改变webView的高度 嗯呢 就是这样

手机网站自适应无高度情况下浮动元素背景如何显示

给标签加一个overflow:hidden就可以 overflow:hidden是超出隐藏..只要不设高度而且里面有浮动元素的话高度就会等于浮动元素的高度. 潘智勇 9/25/2014 5:16:55 PM 如果设了高度而且小于子元素高度的就会把子元素多出来的隐藏掉

利用height和min-height实现高度自适应

需要实现以下效果: 子元素高度小于窗口高度时,父元素高度为窗口高度: 子元素高度大于窗口高度时,父元素高度自适应,由子元素高度决定. 可以这样实现: 依据DOM结构逐层设置目标元素的所有父元素height="100%",直至根元素html,浏览器在渲染过程中会将窗口的实际高度值传递给html元素,然后再根据DOM结构逐层传递,由于height值不能继承,height="100%"也不能隔代传递,因此必须 逐层设置,此步骤中的height不能用min-height代替

清除浮动,浮动元素的高度自适应问题

一.问题 当有时不浮动的父元素装载着浮动的子元素时,这个时候父元素的高度不会跟着的子元素的内容高度而自适应高度变大.比如截图的第一行图,上面一条黑色的粗线,就是父div的边框(为了看效果,我设置了父div的border:5px.左右两边是各浮动一个div). 于是乎,我想解决这个父元素高度不会跟随着子元素的内容而变化的问题.谷歌了一下,找到答案 二.解决方法 参考来源:http://www.ruanyifeng.com/blog/2009/04/float_clearing.html 里面提到了

子元素浮动后、父元素的高度自适应

一.普通情况下,即没有任何浮动样式等的情况下 设置父元素的高度为aotu 或100% 或者不设置,那么父元素会根据子元素的高度而自动调整自身高度. 栗子 <!--html代码--> <div id="wrap"> <img src="./1.png" alt="logo"/> <div id="content"></div> </div> CSS样式 #w

overflow解决float浮动后高度自适应问题

也许你在做网页的时候发现,发一个区块内的元素被应用了float之后,那么整个box的高度对就不以被浮动对象的高度为标准了.如图中的城市导航内的城市列表中采用了float之后,那个外框的高度并不是内容元素的高度: 怎么解决这个问题呢?经发现可以采用overflow来解决!方法是在父元素加上如下代码即可 overflow:auto; zoom:1; overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决. 1 1 <!DOCTYPE h