首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

保持div2与屏幕的左、下、右齐平,但始终低于div1的400px?

要实现保持div2与屏幕的左、下、右齐平,但始终低于div1的400px,可以使用CSS的定位属性和计算属性来实现。

首先,需要将div1和div2放置在一个父容器中,父容器的position属性设置为relative,这样可以作为参考点来定位div2。

然后,给div1设置一个固定高度的样式,例如height: 400px。

接下来,给div2设置position属性为absolute,这样可以脱离文档流,并且可以通过top、left、bottom、right属性来定位。

为了保持div2与屏幕的左、下、右齐平,可以设置div2的left、bottom和right属性为0,这样div2会与屏幕的左、下、右边缘对齐。

最后,为了使div2始终低于div1的400px,可以使用calc()函数来计算div2的top属性。假设div1的高度为400px,那么可以设置div2的top属性为calc(400px + 400px)。

以下是示例代码:

HTML代码:

代码语言:html
复制
<div class="parent">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

CSS代码:

代码语言:css
复制
.parent {
  position: relative;
}

.div1 {
  height: 400px;
}

.div2 {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: calc(400px + 400px);
}

这样,div2就会保持与屏幕的左、下、右齐平,同时始终低于div1的400px。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间影响

说白了width:auto试图达成这一等式:子元素width+padding()+margin() = 参考元素width(参考元素一般为父元素) 【举个例子】: <style type...“标准流”,那么: 1.浮动流顺序排列,这个顺序是和HTML中元素顺序一致,HTMl中先浮动元素排在前面,这个“前面”指的是靠近屏幕边缘一端,“后面指的是远离屏幕一端” 以上面的例子为基础 ....其他元素只能跟在“领头浮动元素”后面 即使其他元素没有跟在“领头元素”后面,而是向相反方向浮动,也始终不能高于“领头浮动元素” .div2,.div3{ float: left; }...【实现思路】:正如上面所说,浮动会脱离文档流从而不占据其他元素物理位置,而我们让div1向左浮动了,这表示我们在考虑div2布局时候完全可以把div1当作不存在。...宽 = body宽度(全屏宽度)- 230px = 除去div1部分剩余屏幕宽度,实现栏自适应

2.1K110

前端学习笔记之CSS浮动浅析

道理和浮动基本一样,只不过需要注意一前后对应关系。由于是浮动,因此右边靠近页面边缘,所以右边是前,因此div2在最右边。       ...假如我们把div2、div4浮动,效果图如下: ?        依然是根据结论,div2、div4浮动,脱离了标准流,因此div3将会自动上移,div1组成标准流。...div2发现上一个元素div1是标准流中元素,因此div2相对垂直位置不变,div1底部对齐。...此时div1div2都浮动,根据规则,div2会跟随在div1后边,但我们仍然希望div2能排列在div1边,就像div1没有浮动,div2浮动那样。     ...那么假如页面中只有两个元素div1div2,它们都是浮动呢?读者此时应该已经能自己推测场景,如下: ?        此时如果要让div2移到div1边,要如何做呢?

99930
  • CSS3页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    div2都是BFC上下文,但是要求是:外边距将不再与上下文之外元素折叠,按照要求,我们应该将div1div2放在不同上下文中,修改后脚本如下: <!...(CSS3)  2.9、page定位 page: absolute一致。元素在分页媒体或者区域块内,元素包含块始终是初始包含块,否则取决于每个absolute模式。...">div1 div2中 div3...当div1从float时从标准流中脱离开了,div2在标准流中,可以形象认为在div2这个队列前没有元素了所以div2要向前靠,脱离标准流元素z方向排列时比标准流中元素排列要靠前一些,div2...在IE8chrome浏览器效果一样。

    3.6K80

    div style clear both_that’s all right

    例如,假设上图中div2浮动(float:left),那么它将脱离标准文档流,div1、div3仍然在标准文档流当中,所以div3会自动向上移动,占据div2位置,重新组成一个流。...我设置div2浮动,div3浮动,效果如下: 同理,由于div2、div3浮动,它们不再属于标准文档流,因此div4会自动上移,div1组成一个“新”标准流,而浮动是漂浮在标准文档流之上...当同时对div2、div3设置浮动之后,div3会跟随在div2之后,div2在每个例子中都是浮动并没有跟随到div1之后。...会跟随在div1后边,但我们仍然希望div2能排列在div1边,就像div1没有浮动,div2浮动那样。...实践效果如下: 这样就达到了效果,试想一,如果两个div都是浮动,那么要如何实现上下排列呢,也就是div2div1下面?

    68420

    CSS浮动 (比较详细、生动、经典)

    这里div2浮动(float:left;),可以理解为漂浮起来后靠左排列,浮动(float:right;)当然就是靠右排列。这里靠左、靠右是说页面的、右边缘。...由于是浮动,左边靠近页面边缘,所以左边是前,因此div2在最左边。 假如把div2、div3、div4都设置成浮动,效果如下: ? 道理和浮动基本一样,只不过需要注意一前后对应关系。...依然是根据结论,div2、div4浮动,脱离了标准流,因此div3将会自动上移,div1组成标准流。div2发现上一个元素div1是标准流中元素,因此div2相对垂直位置不变,div1底部对齐。...此时div1div2都浮动,根据规则,div2会跟随在div1后边,但我们仍然希望div2能排列在div1边,就像div1没有浮动,div2浮动那样。...那么假如页面中只有两个元素div1div2,它们都是浮动呢?读者此时应该已经能自己推测场景,如下: ?  此时如果要让div2移到div1边,要如何做呢?

    1.2K20

    CSS

    这里靠左、靠右是说页面的、右边缘。 如果我们把div2采用浮动,会是如下效果: ?...由于是浮动,左边靠近页面边缘,所以左边是前,因此div2在最左边。 假如把div2、div3、div4都设置成浮动,效果如下: ? 道理和浮动基本一样,只不过需要注意一前后对应关系。...依然是根据结论,div2、div4浮动,脱离了标准流,因此div3将会自动上移,div1组成标准流。div2发现上一个元素div1是标准流中元素,因此div2相对垂直位置不变,div1底部对齐。...此时div1div2都浮动,根据规则,div2会跟随在div1后边,但我们仍然希望div2能排列在div1边,就像div1没有浮动,div2浮动那样。...说到这里我们不得不提一一个定义——文档流,文档流其实就是文档输出顺序, 也就是我们通常看到      到、由上而下输出形式,在网页中每个元素都是按照这个顺序进行排序和显示,而float和

    2K30

    CSS进阶04-块格式化上下文BFC

    在一个块格式化上下文中,每个盒外边缘紧贴包含块左边缘(从右到左格式里,则为盒外边缘紧贴包含块右边缘),即使有浮动参与也是如此(尽管盒里行盒可能由于浮动而收缩),除非盒创建了一个新块格式化上下文...3.2在一个块格式化上下文中,每个盒外边缘紧贴包含块左边缘(从右到左格式里,则为盒外边缘紧贴包含块右边缘),即使有浮动参与也是如此(尽管盒里行盒可能由于浮动而收缩),除非盒创建了一个新块格式化上下文...3.2-1 可以看到,id为div1div2和div3三个div生成块盒在root生成BFC,每个盒外边缘紧贴其包含块(bodycontent box)左边缘。...此外,如果该元素有外边距边缘低于该元素内容边缘浮动子元素,那么高度将增大来包含那些边缘。只有参与本块格式化上下文浮动才考虑在内,比如,在绝对定位后代中或者其他浮动中浮动就不考虑。...这时如果让div2处于一个新BFC,则其处于另一个BFCdiv1不再会有margin折叠。

    60030

    由position属性引申关于css进阶讨论(包含块、BFC、margin collapse)

    在这种方式里,块级元素在它们包含块里一个一个垂直延伸,行内元素在它们包含块里从水平排布。 值得注意是,在正常流里垂直边距(vertical margin)是重叠。...div1div2垂直距离由大margin决定,也就是div240px而不是二者之和60px。 其次,行内元素是会被折断,当宽度受到限制时候,它会自动移动到下一行。...如果 direction 是 ltr(),祖先产生第一个盒子上、内容边界是 containing block 上方和左方,祖先最后一个盒子内容边界是 containing block...如果 direction 是 rtl(),祖先产生第一个盒子上、内容边界是 containing block 上方和右方,祖先最后一个盒子内容边界是 containing block...根据BFC规则: 每一个盒子外边缘(margin-left)会触碰到容器左边缘(border-left)(对于从右到左格式来说,则触碰到右边缘) 所以,虽然存在浮动元素aslide,

    1.1K50

    CSS基础布局

    对元素设置fixed,会使元素 脱离文档流(也就是说 不会对其它元素布局 造成影响)。fixed相对于浏览器窗口是 固定。 * 默认情况,会按照元素出现先后顺序 进行层叠。...float+margin 实现两列布局 1. div1 浮动:给出左侧空间 2. div2 margin-left留出 div1 宽度. + overflow: hidden;也变为BFC块,和...float+margin 实现三列布局 1. div1 浮动:给出左侧空间 2. div2 浮动:给出右侧空间 3. div3 margin-left margin-right 分别留出 div1...div2宽度 这里面需要注意:div3要出现在 div1div2 之后。...不管使用什么字体,两个字之间 始终是有间隙。 所以 间隙就出现在了 inline-block上面。 解决办法: 1.

    2.9K20

    CSS3页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    contain: 将背景图像等比缩放到宽度或高度容器宽度或高度相等,背景图像始终被包含在容器内。 示例代码: <!...top-left)、上(top-right)、(bottom-right)、(bottom-left)顺序作用于四个角。...d)、如果提供两个,第一个用于上(top-left)、(bottom-right),第二个用于上(top-right)、(bottom-left)。...e)、如果提供三个,第一个用于上(top-left),第二个用于上(top-right)、(bottom-left),第三个用于(bottom-right)。 垂直半径也遵循以上4点。...八、动画 前端可以使用javascript实现一些简单动画,但是有很大局限;jQuery解决了部分问题,对于一些小动画jQuery表示不错,复杂过渡效果也无能为力;CSS3中引入了2种动画效果表现不错

    3.1K50

    CSS学习记录及整理

    “> CSS全称Cascading Style Sheets,层叠样式表,用于定义HTML元素显示样式,实现内容表现分离。...CSS三大特性 继承性--给父元素设置属性,后代元素都可以继承,仅限于以(color/font-/text-/line)开头属性。...div2--逗号,并列关系,选中所有列出元素 div1 div2--空格,下属关系,选中div1内所有的div2元素 div1>div2--大于号,父子关系,选中所有父元素为div1div2元素 div1...+div2--加号,兄弟关系,选中所有紧跟在div1后面的所有div2元素 属性选择器 [attribute]--选择带有某属性所有元素 [attribute^=value]--例子:a[src^="...scroll内容会被修剪,始终显示滚动条 auto如果内容被修剪,则显示滚动条 inherit从父元素继承 position--元素定位类型,制作一些放在某个框内hot/new小图标时可用”子绝父相

    6.9K80

    CSS&HTML面经专题——(三)CSS定位盒模型经典布局浮动布局BFC

    第二个条件是要求祖先元素必须定位,通俗说就是position属性值为非static都行。 fixed 固定定位,absolute一致,偏移定位是以窗口为参考。...---- center absolute一致,偏移定位是以定位祖先元素中心点为参考。盒子在其包含容器垂直水平居中。(CSS3) page absolute一致。...它就像是relative和fixed合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性表现是现实中你见到吸附效果。...问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度50%。同时div中有一个文字A,文字需要水平垂直居中。...父元素相对定位,那绝对定位子元素宽高若设为百分比,是相对谁而言

    2K31

    JQ事件和事件对象

    ,不会触发(增加阻止事件冒泡功能) mouseover...,keypress()事件只在按下键盘中任意字符键(A-Z)时触发,功能键不会触发(如shift ctrl 等)     4 event.which 指示按哪个键 1 ...event.pageX/event.pageY   鼠标相对于文件左侧和顶部位置   //会随着滚动条变化而变化           //screenX/screenY  获取显示器屏幕位置坐标...//整个屏幕高度    不会随着滚动条变化而变化          //clientX/clientY  获取相当于页面视口坐标 //除去上下窗口      不会随着滚动条变化而变化 <script...以下是主要鼠标按钮映射代码对应表 Event.which属性值 对应鼠标按钮 1 鼠标健 2 鼠标中健(滚轮键) 3 鼠标健       6 event.preventDefault()  阻止事件默认行为

    4.1K20

    CSS样式表

    ,图片默认出现在左上角   常用有:   background-position:top;上             :bottom;             :left;             ...text-align:水平对齐方式       center;居中       left;       right;  vertical-align:垂直对齐方式,单独设置没有效果,需要和行高配合使用...       middle;居中        top;上        bottom;  line-height:行高 边界边框: <!...,border也可以单独设置上///右边框,边框大小也是包含元素里面的 关于border,还有很多用法: <!...可以利用border特性制作一些不规则形状。 列表方块: <!

    1.6K80

    CSS基本知识(慕课网)

    填充也可分为上、(顺时针)。如下代码: div{padding:20px 10px 15px 30px;} 顺序一定不要搞混。...边界也是可分为上、。...{float:left;} //id为div1模块在左边 #div2{float:right;}      //id为div2模块在右边     ③、层模型(Layer)       ...">       3、固定定位(position: fixed) fixed:表示固定定位,absolute定位类型类似,但它相对移动坐标是视图(屏幕网页窗口)本身。...由于视图本身是固定,它不会随浏览器窗口滚动条滚动而变化,除非你在屏幕中移动浏览器窗口屏幕位置, 或改变浏览器窗口显示大小,因此固定定位元素会始终位于浏览器窗口内视图某个位置,不会受文档流动影响

    2.2K60

    CSS进阶07-浮动Floats

    如果当前盒是浮动,而此前源文档中已有元素生成了浮动盒,那么对每个此前生成盒而言,要么当前盒外边缘在此前生成盒外边缘之右,要么当前盒顶部必须低于此前生成盒底部。浮动元素亦是。...both:要求盒top border edge低于源文档内此前元素生成浮动盒bottom outer edge。 none:对盒相对于浮动定位没有约束。...第一种方法是把 B2 顶部top和 F 底部bottom,即,放在 y= M1+H 。... 说明:要是没有 clear ,首段和末段两个段落边距将会折叠并且末段上边框边缘将同浮动段落顶部。如下: ? clear 使得上边框边缘低于浮动,即下降2em。...情形),或者低于所有此前浮动盒外边缘( clear: right 情形),或者低于此前左右浮动盒外边缘( clear: both 情形)。

    1.5K40
    领券