javascript - 如何将左侧位置的 div 放置在屏幕边缘的另一个 div 和右侧位置？

Question

我需要做一个像这样带有标题的简单网站:

_{(来源:x-br.com)}

我的图片可能不完全准确，但 wrapper 必须恰好为 960 像素，居中。

虽然菜单栏...RIGHT 必须有无限宽度，无论客户端屏幕的尺寸如何。

对于两边，我们都知道width: 100%解决的又快又犀利。但只是一侧？

到目前为止，我已经设法通过混合使用 css 使其以变通方式工作:

.wrapper {
max-width: 960px;
margin: 0 auto;
position: relative;
width: 960px;
}

#top_menu {
margin-top: 48px;
height: 40px;
width: 582px;
display: block;
float: right;
}

#top_menu .leftborder {
width: 7px;
height: 40px;
background: url('images/menuborder.jpg') no-repeat;
display: block;
float: left;
}

#top_menu .content {
width: 543px;
height: 20px;
background-color: #231f20;
display: block;
float: left;
padding: 10px 16px;
}

#top_menu_scrapper {
position: absolute;
display: block;
height: 40px;
background-color: #231f20;
height: 40px;
top: 48px;
left:960px;
width: 0px;
margin: 0;
}

使用这段 JS 代码:

function AutoDivScrapper () {
var ScrapperDiv = document.getElementById('top_menu_scrapper');
var UserWindow = parseInt(document.body.clientWidth);
var NewScrapperWidth = ( UserWindow - 960 ) / 2

if (NewScrapperWidth < 0) {
    NewScrapperWidth = 0;
}

ScrapperDiv.style.width = parseInt(NewScrapperWidth) + "px";
}

我创建的是:

首先，包装内有一个名为 top_menu 的 div，它创建了菜单的一部分，我将在其中编写链接并放置精美的圆形边框、小房子等。

另一个 div，称为 top_menu_scrapper，它是绝对的，基本上只有高度、顶部和左侧对齐以及背景颜色。

JS 捕获用户屏幕的宽度，将 960(包装的大小)从包装的两侧取出。因为我只想要一个尺寸，所以我将值分成两半，BAM，我们得到了我想要填充的屏幕部分的正确尺寸(以像素为单位)。

这对我来说似乎很完美，但是你猜怎么着，我的老板说这是一个有点“bug-ish”因为如果客户端在小屏幕上加载页面，然后在不重新加载的情况下最大化它，我们会看到右边有个大洞。

是的，我的 friend 们，尽管听起来更奇怪，但这正是他所提示的。

无论如何，我来了，请求您提供一些知识来帮助我提出建议。

如果你们知道做这个菜单的更好方法...或让我的 JS 在实时中工作，我将非常感谢你们的支持:D

Answer 1

我是在 this site 上做的很久以前。我不记得具体是怎么做的，但我检查了 CSS，我认为这是必要的代码。

#menu-extend { 
background-color: #e8e8e8;
float: right;
height: 30px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: -30px;
position: relative;
right: 0px;
top: 100px;
width: 50%;
z-index: 0;
}