固定div左中居div

我不能爲我的生活得到這個工作。我想要一個固定的div（菜單）在居中div（內容）的左側。當窗戶變小時，頁面應該可以像平常一樣調整窗口的大小，以便觸摸左側窗戶的牆壁。固定div左中居div

我做什麼，我想要做的工程圖：

編輯我希望能調整窗口的大小和內容和菜單不應該從左側瀏覽器壁上掉下來。而且菜單應該總是相對固定的內容...... 編輯

EDIT2下做了什麼，我想（從xFortyFourx擴展的解決方案）：

#body{width: 1200px; border: 1px solid #000; margin: 0 auto;} 
#wrap {width: 800px;min-width: 800px;min-height: 1800px;margin: 0px auto;border: 2px #000 solid;position: relative;} 
#sidebar {width: 160px;height: 100px; border: 2px #000 solid;position: absolute;top: 0;left: -180px;} 
#fixed{position: fixed; width: 160px; height: 50px; background-color: #234324;} 
<div id="body"><div id="wrap"><p>Content</p><div id="sidebar"><div id="fixed"><p>Sidebar</p></div></div></div></div>

EDIT2

來源

2012-04-30 Zapmore

你要支持哪些瀏覽器？是html5 + css3的一個選項？或*不寒而慄*你需要支持IE6嗎？ – Jeroen

@Zapmore這將是很好，如果你張貼你到目前爲止嘗試過什麼 – freebird

IE 7和以上會很好（因爲人們仍然使用舊版瀏覽器）。不需要ie6 tho ... – Zapmore

HTML

<div id="wrap"> 
<div id="sidebar"> </div> 
</div>

CSS：

#wrap { 
    width: 950px; 
    min-height: 400px; 

    margin: 50px auto; 
    border: 2px #000 solid; 

    position: relative; 
} 
    #sidebar { 
     width: 50px; 
     height: 100px; 
     border: 2px #000 solid; 
     position: absolute; 
     top: 0; 
     left: -70px; 
    }

編輯：這裏是一個樣本http://jsfiddle.net/XWkBw/

來源

2012-04-30 08:59:31 KBN

感謝您的回覆，這正是我想要的，當我將固定div放在側邊欄中作爲導航時，效果很好:)但是，如果瀏覽器的尺寸調整得小一些，那麼側欄可能無法保護如果你知道我的意思，從窗口向左側落下。如果我讓瀏覽器窗口變小，那麼側邊欄div將觸摸左側瀏覽器牆並且不會超過（可能是危險的，因爲它是網頁的導航...） – Zapmore

「是的，您可以將所有內容

，只是把sidebar div留在最後 - 「但是當我縮小窗口時，」#sidebar「消失在左邊，這是一個很大的問題，因爲它是網站的導航。「＃wrap」保留在窗口內，就像它應該... – Zapmore

@Zapmore，爲了保持簡單而不涉及Javascript，你可以給你的容器div一個「min-width：100px;」 [上例中的容器是「包裝」]。 – KBN

HTML：

<div class="main-container"> 
    <div class="navigation"> 
     nav  
    </div> 
    <div class="content"> 
     content   
    </div> 
</div>

CSS：

.main-container { 
    width: 400px; 
    margin: 0 auto;   
} 

.navigation { 
    width: 100px; 
    float: left; 
} 

.content { 
    margin-left : 110px; 
}

的jsfiddle例子：http://jsfiddle.net/5ZUrF/

來源

2012-04-30 09:04:45

謝謝你的建議，但這不是我想要完成的。我希望內容以居中和導航爲中心內容... – Zapmore

是的，您可以將所有內容添加到

中，只需將邊欄div留在最後即可。 – KBN

你可以通過這個例子：

Fixed Box on left hand side

HTML

<div id="wrap"> 
<div id="sidebar"> </div> 
</div>

CSS

#wrap { 
    width: 500px; 
    min-height: 500px; 

    margin: 50px auto; 
    border: 2px #000 solid; 

    position: relative; 
} 
    #sidebar { 
     width: 50px; 
     height: 100px; 
     border: 2px #000 solid; 
     position: fixed; 
     top: 50px; 
     left: 60px; 
    }

來源

2012-04-30 09:10:31 Murtaza

謝謝，這可以解決側欄在調整大小時從左側瀏覽器窗口掉下來的問題，但是sidbar不會保留固定的內容的nexxt，側欄應該是導航菜單... – Zapmore

固定div左中居div

回答

相關問題