Question

我正在试图找出如何在内容左侧放置一个浮动导航栏，即固定宽度，但在其周围有一个容器，该容器延伸到视口边缘，同时保持内容在页面中心

这就是我到目前为止所做的事情，以及我的意思。 http://dl.dropbox.com/u/23132/index.html

任何帮助或想法？

Answer 1

从Bordingo获得解决方案。

<html>
<head>
<style type="text/css">
html, body {    height: 100%;    min-width: 960px;}

.container { width: 960px; height: 100%; margin: 0 auto; background: #ddd; }

.nav-fix { position: absolute; left: 0; width: 50%; min-width: 480px;  height: 100%;}

.nav { position: absolute; top: 100px; right: 280px; width: 9999px; height: 200px; background: #333; }

.nav-box { position: absolute; top: 10px; right: 10px; width: 180px; height: 180px; background: #eee; }

</style>
</head>
<body>
<div class="nav-fix">
<div class="nav">
<div class="nav-box"></div>
</div>
</div>
<div class="container"></div>
</body>
</html>

Answer 2

如果您愿意使用jQuery，您可以非常轻松地计算主体的偏移量并相应地调整侧边栏的宽度/填充/边距。

简单示例

http://dl.dropbox.com/u/1588084/floatmenu.htm

浮动菜单变量宽度

2 个答案: