javascript - 我的网页 div 没有正确设置动态宽度

Question

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

我目前的尝试是:

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

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

谢谢

这是一个基本的 fiddle :它的设置不同，但想法就在那里。我只是不确定该怎么做。 http://jsfiddle.net/fallenreaper/DfZx7/

在对我的 fiddle 进行越来越深入的修补后，我相当确定我在给出的示例中已经弄明白了。 derp 待命，看看我是否可以将相同的东西应用到我的代码中。

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

Answer 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 */
}

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

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

定位它们

Check this fiddle修改你的代码