Question

<div class="ui-datatable-scrollable-view" style="
    width: 100%;
    position: relative;
">
        <div class="ui-widget-header ui-datatable-scrollable-header" style="position:fixed;top:50px">
         
        </div>
    </div>

我有一个div元素贴在页面顶部。我把css作为

width: 100%;
  position: fixed;
  z-index: 2;

但它不是宽度。

我尝试了几种方法来做到这一点。我尝试将父div作为position：relative，但这不起作用;

我认为我的元素的宽度等于屏幕的宽度。我尝试给它固定的宽度以适应所需的大小。但是在改变筛分尺寸时，它将无法正常工作。我希望它采用其父级的宽度。

Answer 1

我刚尝试使用你的CSS，它适用于我

HTML

<div class="container"></div>

CSS

.container {
 width: 100%;
 height: 100px;
 position: fixed;
 z-index: 2;
 background-color: black;
}

检查你的html和body元素的宽度是否为100％

指向codepen的链接：https://codepen.io/athapliyal/pen/VzqyBX

Answer 2

#test {
  width: 100vw;
  position: fixed;
  z-index: 2;
  height: 50px;
  background-color: blue;
}

<div id="test">

如果您提供宽度为百分比，则它相对于div的父级，因此您可以定义宽度为100％的父级以使其工作。为了给您提供一个示例，我们需要更多代码。

所以另一个解决方案是使用100vw定义宽度。 1vw =视口（窗口）宽度的1％。

这样它就会相对于视口而不关心父节点。

对于您可以使用的高度：vh（视口高度）

Answer 3

我认为宽度实际上是100%，但是由于你没有设置高度，它看起来是不可见的。

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent {
  width: 800px;
  background-color: grey;
  height: 600px;
}

.child {
  position: fixed;
  background-color: blue;
  width: inherit; height: 100px;
}

如何设置具有固定位置的html元素的宽度

3 个答案: