跨頁伸展DIV不工作

-1

我必須失去了一些東西很明顯，但我只是想：跨頁伸展DIV不工作

<div style="width:100%;height:100%;background-color:gray"> 
bla 
</div>

但div在頁面上不拉伸。

見jsfiddle

爲什麼這不是工作，我怎樣才能使它發揮作用？

來源

2015-11-29 kofifus

要清楚，你的意思是有DIV蓋*頁面的整個寬度*而不是整個高度？ – www139

對於您的問題，您有4個適當的答案，請將其標記爲已接受。 – djowinz

檢查了這一點https://jsfiddle.net/5o65ptcr/2/

將這個CSS用於HTML和身體：

html,body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
}

的問題是，HTML和BODY標籤都有默認的裕度（行爲像填充）應用於用戶代理樣式表（內置於瀏覽器的樣式表）。

更新：考慮到這個問題，我以爲你的意思是「整個頁面寬度」而不是整個高度。我已更新我的問題，包括整個寬度和整個高度。請確保你準確地解釋你的問題。

來源

2015-11-29 06:14:12 www139

仍然無法填充頁面 – kofifus

@kofifus您說過「橫跨頁面」，我以爲你的意思是頁面的寬度不是整個高度。請看我更新的答案。 – www139

<div style="width:100%;height:100%;background-color:gray;position:absolute;top:0;left:0;"> 
bla 
</div>

部門是相對於他們的父母。所以如果body元素沒有高度100％，那麼div不能在屏幕上伸展。你必須將其定位於絕對位置，這樣它才能在整個頁面上展開，因爲它不再受其父級的限制並移動到它自己的圖層。

來源

2015-11-29 06:12:39 djowinz

給予height:100%;至html和body。

body, 
html 
{ 
    height: 100%; 
    padding: 0; 
    margin: 0; 
}

Jsfiddle

來源

2015-11-29 06:13:08 Alex

啊我明白了，但爲什麼沒有寬度：100％？ – kofifus

@kofifus'寬度：100％;做同樣的事。 'div'有'display：block;'默認。這意味着它被拉伸成一行，所以如果你刪除了'width：100％'，它可以適應其父項的100％。 [的jsfiddle]（https://jsfiddle.net/4Ld4p68L/6/）。 – Alex

嘗試代vw，vhcss單位%

<div style="width:100vw;height:100vh;background-color:gray;"> 
 
    bla 
 
</div>

的jsfiddle https://jsfiddle.net/4Ld4p68L/4/

來源

2015-11-29 06:19:25 guest271314

跨頁伸展DIV不工作

回答

相關問題