將頁面內容調整爲瀏覽器窗口寬度

我正在調整瀏覽器寬度的頁面上工作。當瀏覽器窗口拉伸時，'內容'需要增長（讓這部分工作！），當窗口縮小超過最小寬度時，頁面結構需要保持不變。所以我應該可以滾動查看「側邊欄」，但它會跳下去。請幫忙！將頁面內容調整爲瀏覽器窗口寬度

這裏是我到目前爲止已經試過 -

<div id="wrapper" style="width:90%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    border: 1px solid blue;"> 

    <div id="content" style="width:54%; 
    float:left; 
    min-width:400px; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green;"> 
    </div> 

    <div id="sidebar" style="width:350px; 
    float:left; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow;"> 
    </div> 

</div>

感謝。

來源

2013-09-27 imhere

給出的jsfiddle這將是明確的回答 – sun

這 - http://jsfiddle.net/tssCQ/ – imhere

設置捲紙上出現min-width: 850px;。或者你想要的最低限度是什麼。首先把你的側邊欄和浮動是正確的：

小提琴：http://jsfiddle.net/mdares/JEVfC/

#wrapper { 
    width:90%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    border: 1px solid blue; 
    min-width: 850px; 
} 
#content { 
    min-width:400px; 
    width: 54%; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green; 
} 
#sidebar { 
    width:350px; 
    float:right; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow; 
}

而且 - 如果你不想讓他們之間的增長差距，在#sidebar設置margin-left: 3%;。在#content上，刪除width: 54%;並添加overflow: hidden;

來源

2013-09-27 15:35:01 Matthew

更新 - 剛剛意識到你的側欄應該是在右側。 – Matthew

謝謝！現在側欄停留在那裏，但當窗口拉伸時，內容需要增長。任何建議？ – imhere

我最後的注意事項表明，看到這裏：http://jsfiddle.net/mdares/JEVfC/4/ – Matthew

可以定義一個最小寬度：

#wrapper { 
min-width: 600px; 
}

來源

2013-09-27 15:34:30 Roman

感謝！嘗試過，但側杆仍然跳下去。 – imhere

在您的div類中，將最小寬度參數添加到該樣式，以便它不縮小到低於該樣式！你可以是這樣做的：

<div id="wrapper" style="width:90%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    min-width:500px; /* Enter whatever minimum width you want your page to be */ 
    border: 1px solid blue;"> 

    <div id="content" style="width:54%; 
    float:left; 
    min-width:400px; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green;"> 
    </div> 

    <div id="sidebar" style="width:350px; 
    float:left; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow;"> 
    </div> 

</div>

來源

2013-09-27 15:43:59

你跟@media查詢或自適應網頁設計熟悉？是在CSS3 maded。這可能會幫助您根據viwer的屏幕大小設計您的網頁。

如何使用

您需要（使用@media查詢）來設置最高和最低限度的with財產，dependely （或沒有）屏幕的大小。檢查this

解決您的問題 HTML

<div id="wrapper"> 
    <div id="content"></div> 
    <div id="sidebar"></div> 
</div>

CSS

#wrapper { 
    max-width: 90%; 
    width:100%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    border: 1px solid blue; 
} 
#content { 
    max-width: 54%; 
    width:100%; 
    float:left; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green; 
} 
#sidebar { 
    with: 100%; 
    max-width:350px; 
    float:left; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow; 
}

JSFIDDLE

來源

2013-09-27 15:44:30 fiskolin

這是世界衛生大會你在找什麼？ check this

<div id="wrapper" style="width: 90%; 
    margin: 0 auto; 
    height:400px; 
    background: #fff; 
    padding: 20px; 
    border: 1px solid blue;"> 

    <div id="content" style="width: 54%; 
    float: left; 
    height:400px; 
    margin-right: 3%; 
    border: 1px solid green;"> Content </div> 

    <div id="sidebar-left" style=" width: 31%; 
    float: left; 
    margin-right: 3%; 
    height:400px; 
    border: 1px solid yellow;"> Sidebar </div> 
</div>

來源

2013-09-28 05:19:28 sun

將頁面內容調整爲瀏覽器窗口寬度

回答

相關問題