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

-1

<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作为位置：相对但不工作;

我认为我的元素是采取的宽度等于屏幕的宽度。我试着给它固定的宽度来适应所需的大小。但是，如果改变屏幕尺寸，它将无法正常工作。我希望它取得其父母的宽度。

来源

2017-08-31 Ashish Bisht

百分比宽度是指它的父元素宽度 –

这里是完整的代码？ –

使用'width：100vw;'然后它相对于视口 – Doomenik

我只是用你的CSS尝试，它为我的作品

HTML

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

CSS

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

检查你的HTML和body元素具有100％的宽度

Link to codepen：https://codepen.io/athapliyal/pen/VzqyBX

来源

2017-08-31 07:50:09

这不提供有用的答案，请考虑添加对该问题的评论 –

我想要一个具有固定位置的子div将继承其父母的100％宽度 –

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

<div id="test">

如果您提供的宽度百分比是相对于div的父母，所以你可以用100％的宽度定义父，使其工作。为了给你提供一个例子，我们需要更多的代码。

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

这样它将相对于视口而言并不在乎父母。

对于高度可以用：我认为，宽度其实100%vh（视口的高度）

来源

2017-08-31 07:50:30 Doomenik

如果您需要更多代码来回答问题，请添加评论。这个答案是基于猜测，并没有提供有用的信息 –

@MatthiasS。它确实，vw在任何情况下都可以作为解决方案。我向他解释了为什么他的实际代码可能出错，并给了他一个例子，说明如何使它100％工作，对我来说这是一个有用的答案。 – Doomenik

其实我的固定元素采用视口的宽度，当我给宽度为100％。但我希望它采取它的父div的宽度 –

，但是因为你没有设置一个高度，它似乎不可见。

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; 
}

来源

2017-08-31 07:50:48

yes..but我想让孩子继承父母的宽度 –

请查看我更新的答案 –

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

回答

相关问题