我正在组件B(标头)内部渲染组件A(全屏覆盖)。 我将组件A指定为height: 100vh ,这确实是我的屏幕的高度,只是将其按标题的大小向下推。

我希望它既是屏幕的高度,又是屏幕的整个覆盖区域,但不指定margin-top: -$(size of my header)

我该怎么办?

#1楼 票数:0 已采纳

通过使用fixed值的属性position

如注释中所述,可以按如下方式使用position属性:

<div class="componentA">test</div>
.componentA {
    position: fixed; // we make it position relative to the viewport.
    top:0; // top edge of content box to top position 0
    right:0; // right edge of content box to right position 0
    bottom:0; // bottom edge of content box to bottom position 0
    left:0; // left edge of content box to left position 0
}

如您所见,我们现在已将带有componentA类的div的内容框边缘裁定为位于视口的零点(上,右,下,左)。 如果这样的话。

关于位置:固定 (来自w3school

position: fixed;的元素position: fixed; 是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top,right,bottom和left属性用于定位元素。

视口 (根据此答案

视口是用户当前可以看到的网页的一部分。 滚动条移动视口以显示页面的其他部分。

更具体地说,视口与屏幕分辨率或浏览器窗口的大小无关。 它仅指网页在任何给定时间对用户可见的空间。

  ask by Michael translate from so

未解决问题?本站智能推荐:

2回复

我想把它放在屏幕的中间,我想让div标签成为子元素的大小[重复]

这个问题在这里已经有了答案: 如何将绝对定位的元素居中放置在 div 中? (35 个回答) 如何将“位置:绝对”元素居中(29 个回答)
1回复

如何使内部元素适合父元素

我似乎无法找到一种方法来使内部元素与其父元素适合/调整大小。 当前代码如下所示: 页面元素最终看起来像这样,并且在我调整大小时宽度固定。
1回复

React-当父组件收缩时使子组件收缩

我有一些很简单的事情。 我有一个如下所示的横幅组件 和一个 Card 组件 我想按如下方式使用它们 现在,我的想法是我希望卡片随着横幅尺寸的缩小而缩小。 现在,我的横幅 css 如下 我的卡是 发生的情况是,当我缩小页面时,我的卡片高度大于横幅高度 --> 参见图片
2回复

根据父元素的宽度(SASS)在SASS中设置子元素的背景颜色

我是SASS的新手。 实际上,我想基于(.someClass div元素)的宽度将类(.someClass)内的跨度的背景设置为“黄色”或“橙色”。 我可以轻松地在jQuery中执行相同的操作,但是在这里我必须在React中执行操作,因此尝试通过SASS实现。 有人可以通过正确的语法帮助我
1回复

如何在父元素悬停时更改组件的样式?

所以我使用的是sass / scss,我需要在其父级悬停时更改组件的样式。 我的意思是做一些像: 得到它了? 这就是想法,当.choose-profile-card徘徊时,我需要改变.btn-flat--within的风格.btn-flat--within ,有没有办法做到这一点?
2回复

如何选择每两个/三个子元素或兄弟元素并应用样式?

我有 10 个孩子的 div。 我想将display: 'flex'和flex-direction: 'row'到父 div 的每两个子级。 但目前要这样做,我必须进一步将两个 div 放在一个单独的 div 中并进行样式设置。 有没有我不创建class='flex-row'的方法或伪类。 谢谢你。
1回复

在React组件中的页面加载时按顺序淡入淡入文本元素

你好反应组件的页面加载我希望文本元素一个接一个地淡入淡出。最好使用 css。 例子:
1回复

阻止文本在包含各种子元素的div中裁剪而无需调整文本大小?

我有些divs需要在其中容纳各种文本元素。 有多个元素( p , h1 , li , pre ) 我见过的每个解决方案仅适用于div单个元素,或者通过调整内容的大小以使其适合而起作用。 有没有办法只剪切不完全合适的线? 我正在使用ReactJS,并且可以使用Javascript或C