在屏幕上完全拉伸DIV

我有一個div（請參閱下面的代碼），非常簡單。運行代碼時，我想出了一個灰色的框。但是，我的目的是讓灰色框從瀏覽器窗口的開始到瀏覽器窗口的END，而下面的代碼所做的是創建一個灰色框，其中似乎是白色邊框。

<div style="height: 30px; background-color: gray; color: white;"> 
    Hey 
</div>

我很抱歉缺乏解釋，但我發現沒有好的方法來說出我正在嘗試做的事情。在此先感謝，

湯姆。

來源

2013-07-03 Thomas Gouder

沒有看到更多的代碼我想'寬度：100％;'你試過嗎？ – Sergio

添加'寬度：100％' – Brian

可能重複（剛剛實現）http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space?rq=1 –

如果你想保持你的高度：你希望你的div是30像素高body { padding: 0; margin: 0 }

來源

2013-07-03 17:25:38 Brian

你不需要100％左右的報價 –

如果你想一個div填補所有可用空間使用以下命令：

width: 100%; 
height: 100%;

您可以在可用空間的百分比定義尺寸。

來源

2013-07-03 17:24:29

如果我正確理解你的，你需要的寬度設置爲100％

<div style="width: 100%; height: 30px; background-color: gray; color: white;"> 
    Hey 
</div>

來源

2013-07-03 17:25:27 Nikola

添加width:100%;要說到div填滿所有的橫向空間。

來源

2013-07-03 17:25:35 Sergio

<head> 
<style> 
    body { 
     padding: 0; 
     margin: 0; 
    } 
</style> 
</head> 

<body> 
<div style="height: 30px; width: 100% background-color: gray; color: white;"> 
    Hey 
</div> 
</body>

我假設和：

<div style="height: 30px; width: 100%; background-color: gray; color: white;"> 
    Hey 
</div>

也擺脫白色邊框，添加此寬度一路。要做到這一點，你只需設置div的寬度爲100%，並確保身體沒有填充（這可以將您的元素向右移一點，我建議使用reset.css）

希望這有助於！

來源

2013-07-03 17:26:13 EpicPineapple

你應該消除尺寸後的「px」，I.E. 'padding：0;'因爲0不需要單位。 –

這是正確的答案。 'body'在大多數瀏覽器上默認都有margin和/或padding。您需要將其清零，如下所示。許多人使用CSS Reset（例如Meyer的CSS Reset）來清除所有這些小怪事，並讓所有瀏覽器從一個公共點開始。 – brentonstrine

在屏幕上完全拉伸DIV

回答

相關問題