當瀏覽器改變尺寸時，網頁變得雜亂

Question

我不是一個非常有才華的網頁設計師，所以當瀏覽器改變其大小時，我無法使我的網頁保持完好。它變得雜亂無章，看起來很糟糕。

當瀏覽器處於其全尺寸時，頁面看起來很好。

這是怎麼看起來像前重新大小的瀏覽器：

，這是它的外觀使得瀏覽器之後小：

僅當您重新調整瀏覽器水平大小時纔會發生這種情況。

這是我的CSS：http://pastebin.com/SfKT0Eth

我想不出我的錯誤，因爲我不是在HTML/CSS非常好。這不是我的領域，所以我缺乏自己想象的知識。

我將不勝感激您的幫助。

編輯

我解決了邊欄和黑暗內容空間的問題。 我無法實現的是當屏幕變小時，防止上層菜單（top-nav）項目下降。

我只是在#sidebar改變了這個：

width: 270px; 

到

width: 19%; 

http://jsfiddle.net/J3jm7/3/

Answer 1

嗨只是我看你的提琴......有幾個問題：

• 頭號你設置width與％這需要它的關係與瀏覽器大小，您可以設置min-width和max-wdith以避免此問題。

• 嘗試把您的HTML是float:left盒子，盒子float:right

• 後，我不明白爲什麼你用postion:absolute的外層div。

查看該演示與小提琴固定http://jsfiddle.net/J3jm7/15/

Answer 2

很簡單的講，很難不分段URL來看看調試。無論如何，你的問題是因爲你沒有使用流體開發實踐。也許嘗試谷歌如何開發流體開發。這個想法是使用％和em以及基本的css字體大小。另外，你可能想看看bootstrap3。

Answer 3

看起來你是在一樓進來。在這方面入門的最佳資源是Ethan Marcotte的Responsive Web Design。看看這裏：http://www.abookapart.com/products/responsive-web-design

Answer 4

，首先你應該真正使你的問題一個Jsfiddle與CSS獨自一人我實在看不出是怎麼回事。

現在，據我所見，您在一些元素中使用寬度的絕對值。你應該看看使用％值。你也應該看看通過CSS的媒體查詢。例如，如果瀏覽器變得非常小，您的側欄會隱藏起來或位於主窗口下方。

您可以通過使用像

@media screen and (max-width: 800px){ 
    #sidebar { 
     display:none; 
    } 

某事，這將隱藏側邊欄，如果瀏覽器窗口中得到調整大小低於800像素寬度 或

@media screen and (max-width: 800px){ 
    #sidebar { 
     float:none; 
     width:100% 
    } 

實現類似的東西，這將擁有側欄，獲得在您的主窗口下方，並將其大小調整爲其父元素的全寬度（如果瀏覽器窗口的大小低於800像素寬度）

媒體查詢當然應該與您的其餘css共存

---

啊，我看到你已經添加了一個小提琴。那麼，如果你想保持你的邊欄270px寬，你可以與容器

.container { 
    width: calc(100% - 275px); 
    ... 
    ... 
    }