網站標題不能在窗口調整大小上調整爲100％

因此，我的網站http://dealminion.com的標題設置爲100％。但是，如果我調整瀏覽器窗口的大小，然後滾動到右側的標題停止，但頁面繼續。這很奇怪。如果您訪問該網站並調整窗口大小，您將看到我在說什麼。這裏是CSS：網站標題不能在窗口調整大小上調整爲100％

#header-intro { 
width: 100%; 
position: absolute; 
height: 600px; 
padding-top: 25px; 
background-color: #657b90; 
border-bottom: 1px solid #000000; 
-moz-box-shadow: 0 5px 2px -2px #777777; 
-webkit-box-shadow: 0 5px 2px -2px #777777; 
box-shadow: 0 5px 2px -2px #777777; 
behavior: url('pie.htc'); 
}

和身體的CSS：

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

是否有任何理由，這是怎麼回事？

來源

2012-02-10 Naterade

會發生這種情況在什麼瀏覽器？快速查看鉻顯示沒有問題。 – Marcus 2012-02-10 15:33:47

，因爲你的'div＃info'有'padding：10px'。所以總有'100％+ 20px' – Giberno 2012-02-10 15:35:13

有同樣的問題..甚至谷歌有同樣的問題檢查google.com ..我想它沒有答案。我想知道你是如何解決這個問題的？ – 2012-06-23 12:55:18

它延伸到包含您的#info元素，它具有width: 100%和padding: 10px，有效地導致了20px的溢出內容。

由於#info是塊級元素，因此不需要將寬度設置爲100％。只需設置width: auto（或者根本不設置它），它將填充可用空間，爲填充，邊框和邊距留出餘量，而不會導致溢出。

#info { 
    position: absolute; 
    z-index: 999; 
    background: #314455; 
    padding: 10px; 
    height: auto; 
    width: auto; /* changed to auto */ 
}

UPDATE：

我有一個更好的瞭解你要完成的任務。

由於絕對定位，寬度崩潰。而不是爲該元素明確設置寬度，請使用left和right隱式設置。

#info { 
    position: absolute; 
    z-index: 999; 
    background: #314455; 
    padding: 10px; 
    height: auto; 
    left: 0; 
    right: 0; 
}

來源

2012-02-10 15:32:45 Brent

我剛剛嘗試過您的建議，但現在'＃info'只適合測試「工作原理」。它不再伸展。 – Naterade 2012-02-10 15:43:03

@Naterade查看更新。 – Brent 2012-02-10 15:44:44

這些建議都很棒，我從來不知道你可以這樣做布倫特，你也是吉布爾諾。但是，當我將它縮小時，標題仍停留在瀏覽器窗口的右邊緣。然後向右滾動停止填充頁面，它看起來被切斷。 – Naterade 2012-02-10 15:54:49

如果不這樣做的任何元素

在#info，嘗試：

#info { 
    position: absolute; 
    z-index: 999; 
    background: #314455; 
    overflow:hidden; 
    width: 100%; 
} 
#info a{ 
    display:block; 
    padding:10px; 
}

來源

2012-02-10 15:47:27 Giberno

@Naterade，因爲你設置了'#wrapper {width：1020px;}'所以如果你想'在右邊停下來'，''min-width：1020px'加入'body'，html' – Giberno 2012-02-10 16:08:31

網站標題不能在窗口調整大小上調整爲100％

回答

相關問題