容器用了fixed 宽度不能100%

2024-11-10

元素设置position:fixed属性后IE下宽度无法100%延伸

元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下层元素)设置了宽度并居中. 解决方案: .div1{left:0}即fixed层设置left值为0. 代码如下: <!DOCTYPE html> <html> <head> <title>test</title> <style> *{ma

CSS 布局实例系列（四）如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？

Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕了,哈~这么简单,不就是全部左浮动嘛,这也好意思拿出来讲?别急啊,其实里面的坑还是挺多的,且待我一个个填上. 1. 通过左浮动实现要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-container"> <div class="

CSS 布局_如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？

实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-container"> <div class="float-element"></div> <div class="float-element"></div> <div class="float-elem

如何设置div的宽度为100%-xx px？

如何设置div的宽度为100%-xx px? 参见如下帖子:http://stackoverflow.com/questions/15183069/div-width-100-10px-relative-to-parent width: calc(100% - 13px);如下设置样式即可

微信小程序设置宽度是100%，然后图片能成为正方形的方法。小程序按屏幕比例的正方形

1.在全局app.js中获取设备的宽度 globalData: { userInfo: null, sysWidth:wx.getSystemInfoSync().windowWidth, //图片宽度 } 2.在其他js中加载时设置高度变量如a.js var appInstance = getApp(); console.log(appInstance.globalData.sysWidth); this.setData({ sysWidth: appInstance.globalData.

宽度的100%和auto的区别

前段时间做项目,发现分不清width设为100%和auto的区别,实在是太水了,就查了点资料,做个总结,有不对的地方欢迎大家指出. width:auto 块级元素默认的宽度值.看一下MDN上的解释:The browser will calculate and select a width for the specified element.大意是浏览器会自己选择一个合适的宽度值,那么怎么计算呢? 我的理解是:被包含元素的margin-left' + 'border-left-width' + '

相册垂直居中; 水平居中. 1)宽度大于高度, 宽度 100%; 2) 高度大于宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

一: 效果: 1) 黑色部分是相框. 2) 图片要实现水平居中, 垂直居中 3) 如果宽度大于高度 ,那么宽度 100% ,如图1 , 高度自适应 ,同时不能超过黑色相框的高度 ; 如果高度大于宽度 , 那么高度 100% , 宽度自适应 ,同时不能超过黑色相框的宽度; 二:代码所以 , 写两个样式, 对应宽度大于高度; 高度大于宽度; 然后判断图片的宽度和高度; ---------------------------- css: /* **

div设置了居中和宽度，但是显示时宽度占100%

<div id="bigDiv" align="center"> <div id="bottom" style="width: 960px;padding-bottom: 20px;background-color:#6FC;font-size:16px;" align="center"> show </div> </div> 外层div设置内容居中,里层di

CSS实现宽度自适应100%，宽高16:9的比例的圖片或者矩形

前言图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利于后期项目的维护. css同样可以实现这个问题,我们可以利用边距的百分比属性定义来优雅实现. 我们通过百分比设置宽度,根据宽度的比例数值*9/16,计算出高度的百分比数值, 设置内边距为高度的数值,最后用绝对定位把图片百分百填充到我们设置的区域里面代码 HTML <div class="bo

CSS实现宽度自适应100%，宽高16:9的比例的矩形

现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形代码 HTML <div class="box"> <div class="scale"> <p>这是一个16:9的矩形</p> </div> </div> css .box { width: 80%; } .scal

iOS下的界面布局利器-MyLayout布局框架

Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsoft/MyLinearLayout 简介 MyLayout是一套iOS界面视图布局框架.其内核是基于对UIView的layoutSubviews方法的重载以及对子视图的bounds和center属性的设置而实现的.MyLayout功能强大而且简单易用,它集成了iOS Autolayout和Size C

关于Div的宽度与高度的100%设定

http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题! 其实,要弄懂div宽度|width100%.div高度|height100%到底是怎么实现

关于div宽度和高度的100%设定

设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题! 其实,要弄懂div宽度|width100%.div高度|height100%到底是怎么实现的,只需弄懂一个简单的问题就可以了,即100%的基数是谁,就是这个100%是相对于谁的width.height来说是100%? div的100%是从其上一级

如何固定table表格宽度，样式不受容器影响

之前有篇关于LODOP打印超文本表格,两个样式相同的表格,出现错位的情况.该博文地址:LODOP打印表格错位的几种情况该文试验了两种现象,第一种浏览器页面显示错位,打印预览也错位,第二种浏览器页面表格不错位,打印预览却错位.这两个其实都是和容纳table表格的容器有关,也就是样式有问题的导致的,仔细对比排查样式,可排查出问题. 想让样式不变形,完全按照代码的宽度,可:在table标签里添加宽度,单元格里加宽度.这种是不受容器影响的.如下面图示,按照纸张进行设计表格,而不是浏览器. 上面那个博文链

子元素使用position：fixed,导致他的宽度不能和父元素保持一致的解决方案

最近在编码过程中,遇到过这样一个问题,代码如下,我们有一个父级,他有一定的宽度,在他的里面有两个子级,其中一个是绝对定位的,且要求他们的宽度都和父级保持一致,然后问题就出现了,我们会发现,有了定位的son他的宽度远远的超出了我们父级的宽度,那么问题是怎么引起的呢? <div class="fathor" style="width:1024px"> <div class="son" style="position:fix

html 设置宽度100% 块状元素往下调解决方法

css在设置body的宽度为100%充满整个屏幕时,当浏览器缩小时块状元素会被挤压下去解决方案非常简单,给body设置一个最小宽度 min-width:960px; 此时即使浏览器缩小,在960像素的范围内块状元素依旧会保持原有的宽度

Div的宽度与高度的100%设定

div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是父div的大小(宽300高200),在尝试中你会发现,div显示会受自身和其上一级div的padding和margin影响,而其实际宽高不受影响.值得玩味噢! 浏览器一般默认解释为内容的高度,而不是100%.但是只要为html和body设置高度为100%就可

ie浏览器和火狐浏览器对对容器宽度定义的差异

首先我们说说firefox和IE对CSS的宽度显示有什么不同: 其实CSS ’width’ 指的是标准CSS中所指的width的宽度,在firefox中的宽度就是这个宽度.它只包含容器中内容的宽度.而Internet Explorer ’width’则是指整个容器的宽度,包括内容,padding ,border. Firefox中:容器占的宽度=内容宽度+padding宽度+border宽度 IE中:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding

02微信小程序-轮播的宽度100%显示和轮播的基础配置

1==>如何让轮播的宽度100%显示? 你先给swiper 外面添加一个大盒子,给大盒子一个类 . <view class='lunbobox'> 然后wxss 里面设置 image , width: 100%; 在设置大盒子的宽度 width: 100%; 这样就可以了. <view class='lunbobox'>  <swiper indicator-dots="{{indicatorDots}}" ci

解决华为手机用rem单位，内容超出屏幕宽度问题

在H5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏幕尺寸的手机,不需要写媒体查询!例如:设计稿是640px,用js计算出来的根节点font-size是100px(证明此时屏幕宽度是640px),那最外层的容器宽度就写成6.4rem(计算成像素也是640),正常情况下是内容宽度就会和屏幕宽度一样.然而某款华为手机.自带的浏览器下,最外层的容器宽度就会

容器用了fixed 宽度不能100%

热门专题