我不能为我的生活让这个工作。我想在一个居中的div(内容)左边有一个固定的div(菜单)。当窗口变小时,页面应该能够像往常一样调整大小,触摸左窗口墙。
我绘制了我想要做的事情:
Image of what I want to accomplish
编辑我希望能够调整窗口大小,内容和菜单不会从左侧浏览器墙中掉出来。此外,菜单应始终相对于内容固定... 编辑
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
答案 0 :(得分:1)
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/
答案 1 :(得分:0)
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/
答案 2 :(得分:0)
你可以看看这个例子:
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;
}