如何使窗口大小更改固定div塊？

這裏是我的HTML和CSS代碼：如何使窗口大小更改固定div塊？

<div id="navigation_header"> 
    .....<br> 
    .....<br> 
    .....<br> 
</div> 
<div id="main_page"> 
    ********** 
</div> 

#navigation_header { 
float:left; 
} 
#main_page { 
float:left; 
}

正如你所看到的，main_page是正確的導航欄。

但是，當我調整瀏覽器窗口的大小時，隨着寬度變小，main_page將出現在導航欄的底部。

當我更改窗口大小時，如何使主頁面固定在導航欄上。

PS：我創建了這個小提琴，檢查http://jsfiddle.net/E83dH/

來源

2014-06-05 Johnny Chen

如果窗口的大小變太小，無法將這兩個元素放在同一行上。您希望發生什麼？你想讓main_page在導航的頂部..或者你想要根據窗口調整大小的東西嗎？ – webkit

@EyalBarta我想保留原點，並隱藏它的左側部分，您可以滾動查看。 –

在這種情況下看看我的答案在下面..我認爲它應該覆蓋它:) – webkit

對於你想你應該換一個DIV和風格與最小寬度兩個元素是什麼：

.wrap { width:100%; min-width:300px;} // * min-width should be the combined width of both elements.

http://jsfiddle.net/T87q5/

查看演示

來源

2014-06-05 08:30:21 webkit

所有的答案幫助我學到了...... :) –

絕對！智者是誰從每一個男人/男人學習:)但在我的偏見，我認爲你最終選擇了答案，最準確地回答你的問題。 – webkit

而不是浮動的#main_page，給它一個overflow財產。它將佔用所有寬度並且只佔用可用寬度。

#main_page { 
    overflow:hidden; 
}

JSFiddle

來源

2014-06-05 08:16:41 George

它似乎改變了正確的部分內容，將一條線分成兩部分。任何方式來避免這種情況？ –

這只是因爲空間在哪裏，如果你不想讓元素包裝它的內容，那麼你可以使用'white-space：nowrap;'：http：// jsfiddle。net/E83dH/4/ – George

@JrChen你說過 - >'我想保留原點，並隱藏它的左邊部分，你可以滾動查看' - 這個答案不符合你所描述的。當成爲一個小窗口時，元素將被切斷，而不是滾動。 – webkit

你，如果你想太多根據屏幕寬度改變div的大小提供％width。

這裏是CSS

#navigation_header { 
float:left; 
width:30%; 
} 
#main_page { 
float:left; 
width:70%; 
}

您可以點擊此處查看[的jsfiddle] http://jsfiddle.net/E83dH/1/

來源

2014-06-05 08:17:50 AeJey

我會建議你做，而不是放在兩件事一個容器內，並給予容器min width。逸岸給你所有的div的一個min-width

http://jsfiddle.net/E83dH/3/

HTML

<div class='container'> 
    <div id="navigation_header">..... 
     <br>..... 
     <br>..... 
     <br> 
    </div> 
    <div id="main_page">**********</div> 
</div>

CSS

#navigation_header { 
    float:left; 
} 
#main_page { 
    float:left; 
} 
.container { 
    min-width:300px; 
}

這將確保你在底部得到一個滾動條，但第二個div不下面。請注意，min-width應該是第二個元素低於第一個元素時兩個元素的總寬度。

來源

2014-06-05 08:21:05

OGeez答案肯定會有效。 – SVS

如何使窗口大小更改固定div塊？

回答

相關問題