2017-08-31 85 views
-1

如何設置具有位置html元素的寬度爲固定

<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作爲位置:相對但不工作;

我認爲我的元素是採取的寬度等於屏幕的寬度。我試着給它固定的寬度來適應所需的大小。但是,如果改變屏幕尺寸,它將無法正常工作。 我希望它取得其父母的寬度。

+0

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

+0

這裏是完整的代碼? –

+1

使用'width:100vw;'然後它相對於視口 – Doomenik

回答

0

我只是用你的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

+0

這不提供有用的答案,請考慮添加對該問題的評論 –

+0

我想要一個具有固定位置的子div將繼承其父母的100%寬度 –

0

#test { 
 
    width: 100vw; 
 
    position: fixed; 
 
    z-index: 2; 
 
    height: 50px; 
 
    background-color: blue; 
 
}
<div id="test">

如果您提供的寬度百分比是相對於div的父母,所以你可以用100%的寬度定義父,使其工作。爲了給你提供一個例子,我們需要更多的代碼。

所以另一種解決方案是用100vw定義寬度。 1vw =視口(窗口)寬度的1%。

這樣它將相對於視口而言並不在乎父母。

對於高度可以用:我認爲,寬度其實100%vh(視口的高度)

+0

如果您需要更多代碼來回答問題,請添加評論。這個答案是基於猜測,並沒有提供有用的信息 –

+0

@MatthiasS。它確實,vw在任何情況下都可以作爲解決方案。我向他解釋了爲什麼他的實際代碼可能出錯,並給了他一個例子,說明如何使它100%工作,對我來說這是一個有用的答案。 – Doomenik

+0

其實我的固定元素採用視口的寬度,當我給寬度爲100%。但我希望它採取它的父div的寬度 –

0

,但是因爲你沒有設置一個高度,它似乎不可見。

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

yes..but我想讓孩子繼承父母的寬度 –

+0

請查看我更新的答案 –

相關問題