如何讓我的div成爲瀏覽器的100％？

-3

我已經在html中創建了一個帶有圖片和文本的div，我在css中div的寬度添加了100％，並且我還添加了背景顏色，但由於某些原因div不是瀏覽器的100％我看不到我做錯了什麼。如何讓我的div成爲瀏覽器的100％？

#container { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#pic { 
 
    padding-left: 450px; 
 
    padding-top: 40px; 
 
    position: absolute; 
 
} 
 
#about { 
 
    background-image: url(background.jpg); 
 
    padding-left: 50px; 
 
    padding-top: 150px; 
 
    padding-bottom: 20px; 
 
    text-align: center; 
 
    padding-right: 100px; 
 
    line-height: 2.5; 
 
    width: 100%; 
 
}

<div id="container"> 
 

 
    <div id="pic"> 
 

 
    <img class="errorimage" src="IMG_4847.png" alt="" title=""> 
 

 
    </div> 
 

 
    <div id="about"> 
 

 

 
    <h1 class="name">Rebekah</h1> 
 

 

 
    <h2 class="name2">Web Desgin. Google Adwords. Google Analytics.</h2> 
 

 

 
    </div>

來源

2015-12-31 becky

*始終*重置文檔填充，這樣'HTML，身體{保證金：0;填充：0}' –

你能按照預期的結果的圖像？ –

不知道有多遺憾 – becky

這不是原因100％是因爲DIV運行到#about div的填充。如果您刪除左側和右側填充，它應該可以解決問題。

html, body { 
    margin: 0; 
    padding: 0; 
}  

#about { 
    background-image: url(background.jpg); 
    padding-top: 150px; 
    padding-bottom: 20px; 
    text-align: center; 
    line-height: 2.5; 
    width: 100%; 
}

這裏是一個fiddle

來源

2015-12-31 16:58:15

這不起作用 – becky

我提供的小提琴有什麼問題嗎？什麼似乎關閉？ –

仍然不起作用:-( – becky

使用下面的CSS：

html, body{ 
    margin:0; 
    padding:0; 
} 

#pic img{ 
    padding-top: 40px; 
    width:100%; 
    display:inline-block; 
}

我花了一些代碼的出我的演示更清晰地向你展示。這裏是DEMO

你很近。到100％的寬度需要在實際的img中。和HTML和身體的利潤率和填充需要重新設置，因爲本身帶有一些填充已經爲你

來源

2015-12-31 17:03:15 LOTUSMS

這不起作用 – becky

你的div不佔100％的瀏覽器，因爲它採取其100％的父元素..哪是#container。您可以通過添加此規則，以你的父元素修復這個#container

#container{ 
    width: 100%; 
    height: 100%; //this is if you really wish to make your div to fully take 100% of browser 
}

雖然#container將在這種情況下，父元素..的100％，所以你必須檢查向上父母有你想要的大小實現

來源

2015-12-31 17:04:04 nosthertus

這仍然不起作用 – becky

@ becky是否檢查過包含'＃container'的元素是否具有適當的大小？檢查它是否繼承自'body'或另一個沒有找到大小的元素 – nosthertus

我直接放置在背景圖片的HTML（不是身體更好，因爲它總是在瀏覽器窗口中至少高度）

html{ 
 
    margin:0; 
 
    padding:0; 
 
    background: url('http://www.cats.org.uk/uploads/branches/211/5507692-cat-m.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.container{ 
 
    width: 100%; 
 
    height: atuo; 
 
} 
 

 
#about{ 
 
    padding-top: 100px; 
 
    text-align: center; 
 
    color: lightblue; 
 
}

<div id="container"> 
 
    <div id ="about"> 
 
     <h1 class ="name">Rebekah</h1> 
 
     <h2 class ="name2">Web Desgin. Google Adwords. Google Analytics.</h2> 
 
    </div> 
 
</div>

來源

2015-12-31 17:11:53

不知道以後有什麼結果是你的，但這個目前擁有全幅 - *去除大量的填充右後和左側，因爲瀏覽器增加padding-left和padding-right值寬度，所以有width:100%與padding- left：450px`表示總計算機寬度將爲100％+ 450px ..對於1200px寬度的屏幕，這意味着總寬度將是1650px而不是1200px。如果你想給一個絕對的位置，然後你top:，left:，right:或bottom:不與填充和邊距位置它的圖像

#pic { 
    padding-left: 450px; /*remove*/ 
/***** 
#about { 
    padding-left: 50px; /* remove */ 
    padding-right: 100px /* remove */

另外：

所以從你的CSS刪除這些行

CodePen

html,body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    outline: 1px skyblue solid; 
 
} 
 
#pic { 
 
    padding: 0; 
 
    width: 100%; 
 
    padding-top: 40px; 
 
    position: relative; 
 
} 
 
#pic img { 
 
    width: 100%; 
 
} 
 
#about { 
 
    background-image: url(background.jpg); 
 
    padding-top: 150px; 
 
    padding-bottom: 20px; 
 
    text-align: center; 
 
    line-height: 2.5; 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <div id="pic"> 
 
    <img class="errorimage" src="//placehold.it/1000x300/00ff00/ffffff?text=banner" alt="" title=""> 
 
    </div> 
 
    <div id="about"> 
 
    <h1 class="name">Rebekah</h1> 
 
    <h2 class="name2">Web Desgin. Google Adwords. Google Analytics.</h2> 
 
    </div> 
 
</div>

來源

2015-12-31 17:23:49

如何讓我的div成爲瀏覽器的100％？

回答

相關問題