固定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

回答

相关问题