精华内容
下载资源
问答
  • div设置absolute情况下填充剩余宽度 left:50px; right: 0px; 则自动填充剩余的 posted on 2015-06-15 13:50 资江河畔 阅读(...) 评论(...) 编辑 收藏 var ...

    left:50px;

    right: 0px;

    则自动填充剩余的

    posted on 2015-06-15 13:50 资江河畔 阅读( ...) 评论( ...) 编辑 收藏

    转载于:https://www.cnblogs.com/yudishow/p/4576950.html

    展开全文
  • 我有一个最大宽度的布局,当屏幕宽度大于最大值时,它是水平居中的.布局包括一个固定的标题&菜单;当屏幕宽度小于最大值时,菜单的左侧位置为0,并且当屏幕宽度超过最大值时,菜单的左侧位置需要与布局的其余部分的左...

    我有一个最大宽度的布局,当屏幕宽度大于最大值时,它是水平居中的.布局包括一个固定的标题&菜单;当屏幕宽度小于最大值时,菜单的左侧位置为0,并且当屏幕宽度超过最大值时,菜单的左侧位置需要与布局的其余部分的左边缘齐平.

    这是它应该如何看:

    *{Box-sizing:border-Box;margin:0;padding:0;}

    header{

    align-items:center;

    background:#eee;

    border-bottom:1px solid #999;

    display:flex;

    height:100px;

    left:0;

    justify-content:center;

    padding:0 10px;

    position:fixed;

    right:0;

    top:0;

    }

    h1{

    height:60px;

    position:relative;

    width:calc(100% - 40px);

    max-width:740px;

    z-index:2;

    }

    img{

    height:100%;

    width:auto;

    }

    nav{

    background:#eee;

    border-right:1px solid #999;

    bottom:0;

    left:0;

    position:fixed;

    top:0;

    width:300px;

    z-index:1;

    }

    @media (min-width:801px){

    nav{

    border-left:1px solid #999;

    left:calc((100% - 800px) / 2)

    }

    }

    nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}

    nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}

    main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}

    142320fad4a2e2ebe588bc26c69b1498.png

    然而,当引入垂直滚动条时,由于滚动条宽度被包括在媒体查询中被检查的宽度的事实而产生问题,导致当屏幕宽度在800像素和800像素之间时菜单的负左位置800-xpx(其中x是滚动条的宽度).您可以在下面的代码片段中看到这一点(您可能需要通过将浏览器的大小调整到小于800像素)来查看全屏幕 – 菜单的右边界可以靠近标志和红色边缘菜单被裁剪.

    *{Box-sizing:border-Box;margin:0;padding:0;}

    html,body{height:101%;}

    header{

    align-items:center;

    background:#eee;

    border-bottom:1px solid #999;

    display:flex;

    height:100px;

    left:0;

    justify-content:center;

    padding:0 10px;

    position:fixed;

    right:0;

    top:0;

    }

    h1{

    height:60px;

    position:relative;

    width:calc(100% - 40px);

    max-width:740px;

    z-index:2;

    }

    img{

    height:100%;

    width:auto;

    }

    nav{

    background:#eee;

    border-right:1px solid #999;

    bottom:0;

    left:0;

    position:fixed;

    top:0;

    width:300px;

    z-index:1;

    }

    @media (min-width:801px){

    nav{

    border-left:1px solid #999;

    left:calc((100% - 800px) / 2)

    }

    }

    nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}

    nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}

    main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}

    142320fad4a2e2ebe588bc26c69b1498.png

    我明白发生了什么,为什么会发生,但我的问题是:有什么办法,单独使用CSS来防止它发生吗?我尝试使用视口单位,而不是百分比,但反过来会产生问题;在某些屏幕宽度上,标志会向左移动一点,远离菜单的右边框.如果所有浏览器具有相同的滚动条宽度或允许自定义滚动条的样式,这将很容易解决这个问题,但不幸的是,也不是这样.

    08/09/16:我现在接受了我自己的答案,因为它是我可以想出来的最好的JavaScript解决方案,但我仍然在寻找一个CSS解决方案.

    展开全文
  • 1.宽度占满剩余部分 2.高度满剩余部分 1.想要宽度占满剩余部分怎么解决 clac(100% - ~rpx) 减号两边一定要有空格 2.高度满剩余部分的情况主要发生在 小程序的内容滚动区域高度自适应 因为小程序有tabbar栏 而且...

    暂时遇到的宽高自适应有两种
    1.宽度占满剩余部分
    2.高度占满剩余部分
    1.想要宽度占满剩余部分怎么解决

    clac(100% - ~rpx) 减号两边一定要有空格

    2.高度占满剩余部分的情况主要发生在 小程序的内容滚动区域高度自适应
    因为小程序有tabbar栏 而且官方是没有给出计算tabbar 高度的方法的 所以无法通过计算所有高度来确定变化的滚动区域的高度

    position:absolute;bottom:0;即可**

    举例子:
    在这里插入图片描述

    展开全文
  • } .s2 .left{position: absolute; left: 0; top: 0;} .s2 .right{margin-left: 100px;} 左边左边左边左边左边 右边右边右边右边右边右边右边右边右边右边右边右右边右边右边右边右边右边右边右边右边右边右边右 绝对...

    float 浮动

    .container{ background-color: yellow; }

    .container .left{ background-color: blue; width: 100px; }

    .container .right { background-color: red; }

    .s1 {}

    .s1 .left{float: left; }

    .s1 .right{overflow: hidden;}

    .s1 .clear{clear: both;}

    左边左边左边左边左边左边左边左边左边左边左边左边
    右边右边右边右边右边右边右边右边右边右边右边右

    浮动是最普遍实现的方式,但 css 浮动的初衷并不是用于布局的,所以浮动布局迟早会被淘汰,应该作为备选方式使用。

    7f9ed5ee0739

    左边绝对定位

    .container{ background-color: yellow; }

    .container .left{ background-color: blue; width: 100px; }

    .container .right { background-color: red; }

    .s2 {position: relative;}

    .s2 .left{position: absolute; left: 0; top: 0;}

    .s2 .right{margin-left: 100px;}

    左边左边左边左边左边
    右边右边右边右边右边右边右边右边右边右边右边右右边右边右边右边右边右边右边右边右边右边右边右

    绝对定位方式有个缺点,当左边高于右边时,左边会超出父元素,需要使用 js 补救。

    7f9ed5ee0739

    flex 布局

    .container{ background-color: yellow; }

    .container .left{ background-color: blue; width: 100px; }

    .container .right { background-color: red; }

    .s3 { display: flex; }

    .s3 .left{ }

    .s3 .right{flex-grow: 1;}

    左边左边左边左边左边左边左边左边左边
    右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

    flex 是最鼓励使用的方式,低端 IE 不支持,但在移动端得到了广泛的使用。

    7f9ed5ee0739

    展开全文
  • 1、写两个div盒子,父子关系 <div class="image"> <img :src="food.image"> </div> 2、样式方面(less语法) .image{ ...position: absolute; top: 0; left: 0; ..
  • postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解。 引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话:position:absolute和float会隐式地改变display类型,不论...
  • 1 . 相对定位relative:顾名思义,...如果没有对父级定位,绝对定位absolute则默认以其第一个定位的祖辈为标准.  2.绝对定位和相对定位的盒子,其宽度百分比是以第一个定位祖辈为基准的;默认的是以body为基准的  
  • absolute问题

    2016-12-02 09:41:03
    1. 外层是relative, absolute是,相对于relative, absolute定位。 2. 外层没有relative时,相对于body...然后图片满一屏的原因是宽度:100%造成的。 [url=http://jsbin.com/qeboc/1/edit]demo here[/url] [code=html]
  • 下拉二级菜单宽度占满文档显示区

    千次阅读 2019-03-06 21:54:02
    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽;一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和...
  • relative absolute

    2019-04-20 15:52:49
    1.Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位 2.Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。 3.Relative:相对定位,是相对于其原本的位置来定位的。 4....
  • 深入学习absolute

    2016-09-08 20:20:29
    比如一个div默认宽度占据100%,但加上position:absolute或float属性后,宽度就会自适应内部元素的宽度 比如一个span原本是inline元素,无法设置width属性,但是加上上述属性后,width属性就生效了,不再需要设置...
  • 绝对定位的元素将从文档流中完全删除,它原先在正常文档流中所的空间会关闭,就好像该元素不存在一样,因此不会在原先的位置留下空白。CSS 绝对定位的元素相对它的包含块进行定位。position: absolute 元素的包含...
  • 1.width:100%的作用是满它的参考元素的宽度。(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以“满参考元素宽度”为目标。但不同的地方在于,它能...
  • relative和absolute

    2016-11-23 14:14:00
    absolute属性也有瞬移技能,不同之处在于:absolute属性以天空或其他外界限制计算瞬移位置;而relative属性由于是凡人肉体,偏移能力有限,只能通过自身所在位置计算瞬移位置。 且relative属性的这种瞬间移动之际...
  • 在理解position:absolute relative static fixed的区别时,我们先需要清楚什么是文档流。 一、文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。 每个非浮动块级元素都独有一...
  • 1.width:100%的作用是满它的参考元素的宽度。(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以“满参考元素宽度”为目标。但不同的地方在于,它能...
  • 辨析relative与absolute

    2017-04-24 12:02:00
    谈起它们,想必大家都不陌生。relative,相对定位嘛;absolute,绝对定位嘛...元素仍保持其未定位前的形状,它原本所的空间仍保留。 absolute 元素框从文档流完全删除,并相对于其包含块定位。包含...
  • HTML float 和 absolute

    2019-12-18 15:53:57
    block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性; inline元素不会独占一行,多个相邻的...
  • position:absolute

    2012-03-26 18:14:00
    元素原先在正常文档流中所的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 绝对定位的可扩展性是很差。相对到宽度或者position属性改变,他就会...
  • 这个方法适用于响应页面或宽度占满屏的设计,不必担心后台上传新图片时由于尺寸问题造成页面排版乱掉,也不用写媒体查询来固定高度。 1、设定宽高比例1:1 <div class="picbox"> <img src="images/news...
  • 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克...要想多个div在一行,就可以想办法让div脱离标准流,比如使用float或者absolute; ...
  • position:relative和position:absolute都可以改变元素在文档流中的位置,设置position:relative或position:absolute都可以让元素激活left、top、right、bottom和z-index属性(默认情况下,这些属性未激活,设置也...
  • 可以参考这位大神文章: ...1.包裹性 一旦给元素加上...内联元素span默认宽度是自适应的,你给其加上width是不起作用的。要想width定宽,你需要将span设成display:block。但如果你给span加上absolute或float,那s
  • 元素浮动后剩余兄弟块级元素会满父元素的宽度.box{height:200px;}.left{float:left;width:300px;}.right{float:right;width:300px;}b.使用固定定位html结构如下leftrightcenter//和浮动布局同理...
  • relative、absolute和float

    2014-10-24 11:52:00
    relative、absolute和float  position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left、top、right、bottom和z-index属性。(默认这些属性未激活,设置了也无效)  设置...
  • 两列式布局,可以让内容一列较多的空间,并为固定宽度;其他导航或推荐的内容为自适应列; 实现方式:固定宽度的一列用position:absolute;定位好;然后自适应的一侧用margin进行定位; #le
  • absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不满父...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,524
精华内容 5,409
关键字:

absolute占宽度