0

我有 2 个工具栏，屏幕两侧各 1 个，以及一个主要内容区域。我不希望它不得不横向滚动，因为这很可悲，所以我试图弄清楚是否有人可以帮助我设置它。

我目前的尝试是：

 $("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());

问题在于，由于利润，它仍然太大。而不是我做宽度，我应该做outerWidth，类似于我做窗口的方式，还是有一个jquery命令可以做到这一点？

谢谢

这是一个基本的小提琴：它的设置不同，但想法就在那里。我只是不确定如何去做。 http://jsfiddle.net/fallenreaper/DfZx7/

在对我的小提琴进行越来越深入的修补后，我相当确定我在我给出的示例中已经弄清楚了。 derp Standby 当我查看是否可以将相同的东西应用到我的代码时。

该示例不适用于我的代码，但主要和属性的边框都设置为 2px 左右。减去 8 个像素即可解决。

4

2 回答 2

1

你不需要 JavaScript 来避免滚动条。这是一个布局宽度，两个固定宽度的列和一个流动的列。

这是您的布局的“骨架”以响应方式：

<div id="window">
    <div id="column-sx"></div>
    <div id="main"></div>
    <div id="column-dx"></div>
</div>​

CSS：

#window {
    width:100%;
    overflow:hidden;
}
#column-sx {
    width:54px;
    float:left;
}
#column-dx {
    width: 140px;
    float:right;
}
#main {
    width:100%;
    float:left;
    margin-right:-194px; /* left + right col width */
}
#main > * {
    margin-right:194px; /* left + right col width */
}

这样它就永远不会“中断”，也不会导致水平滚动条。

无论如何，您可能想min-width为#main 内容设置一个，并为内容添加另一个容器，而不是使用> *

用你修改过的代码检查这个小提琴

于 2012-09-22T08:42:30.280 回答
0

在我的脑海中，我认为outerWidth会起作用。如果没有，您可以通过.style属性找到边距值 - 但这并不理想。

如果您动态设置宽度并且您真的讨厌水平滚动，您应该注意的一件事是调整窗口大小。您也可以将上述函数放入函数中，$().resize()以确保宽度始终在窗口内，并用 css 对其进行补充，min-width这样它就不会太小。

于 2012-09-21T16:40:11.133 回答