內容outgrows div 100％

我目前正在嘗試製作一個與整個屏幕一樣寬的div。而且我做到了通過編寫代碼：內容outgrows div 100％

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 

<head> 
    <title>100% width</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <style type="text/css"> 
     html,body { 
      padding:0px; 
      margin:0px; 
      width:100%; 
     } 
    </style> 

</head> 

<body> 

    <div style="background-color:yellow;"> 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
    </div> 

</body> 

</html>

它工作正常，在正常的變焦設置，但是當我在（火狐6.0.2）做最大變焦DIV中的字母跨出的黃色框。有沒有辦法讓黃框延伸到窗口的末端？

謝謝。

來源

2011-09-22 html beginner 83

是否真的重要的DIV邊框的內容？ – Ben

如果您只將css放在div上，並刪除html和body，會發生什麼情況？ – cgatian

您可以強制真的長字與包裝：

word-wrap: break-word;

在你的DIV的風格

。

儘管最大變焦會發生什麼事情嗎？

來源

2011-09-22 02:16:12 Ben

我想不是。我試圖達到的是這樣的http://news.yahoo.com/，即使你放大或縮小到最高水平，一切看起來都完全一樣。沒有元素脫離原來的位置。與http://news.google.com/相反，在最大縮放範圍內，文字「更多」與「登錄」重疊。關於如何實現這一點的任何想法？ –

可以通過耐心和實驗來實現.. 對不起，沒有太大的幫助，它確實取決於你的代碼和設計如何工作。谷歌的一個倒塌到自己的原因是因爲他們使用一些絕對的位置和酒吧的寬度縮小到最大縮放瀏覽器的寬度，而雅虎一個適當的規模與網站的其他部分 – Ben

選項1 如果您想保留黃色框內的文本，請嘗試添加此CSS樣式。

div {word-wrap: break-word;}

這將導致文本轉到下一行而不是繼續。

選項2 或者你可以嘗試隱藏了去過去使用的CSS樣式

div {overflow:hidden;}

來源

2011-09-22 02:20:53 TryHarder

似乎本打我對它與選項1！ – TryHarder

內容outgrows div 100％

回答

相關問題