2

在我的网站上，我有三个 div、一个标题、一个主要内容和右侧的侧边栏。侧边栏是实际问题。我希望侧边栏始终贴在浏览器窗口的右侧，如果用户调整窗口大小以使宽度低于主边栏和侧边栏，侧边栏会停在主要内容的左边缘。

当用户第一次访问网页并至少在 Mac 上按下“绿色，最大化窗口按钮”时，窗口应该调整大小，以便主要内容和侧边栏边对边放置，没有间隙。

使用我的代码，一切正常，除了当我将窗口调整到可能的最小宽度然后按下最大化窗口按钮时，两个 div 之间有 16px 的间隙。

我的代码：

HTML：

    <div id="header">Header</div>
    <div id="container">        
        <div id="main">
        <p> Left </p>
        </div>

        <div id="sidebar">
        <p> Right </p>
        </div>
    </div>

CSS：

body{
margin:0 0;
min-width:606px;
}

#header {
    padding:5px 10px;
    background:#00FF00;
    height:100px;
}

#container{
    min-width: 865px;
    min-height: 50px;
}

#main {
    float:left;
    min-width: 622px;
    background:#FF0000;
}

#sidebar {
    float:right;
    width:243px;
    min-height: 50px;
    background:#0000FF;
    margin-bottom: -20px;
}
4

1 回答 1

2

参考： jsFiddle （在地址栏中，删除/show/以访问 jsFiddle 编辑页面。）

与其float为你的布局打交道，不如使用它table来table-cell实现你的目标。在 XP 机器上的 Firefox、Chrome、IE8 中测试和工作。

HTML：

<div id="header">Header</div>

<div id="container">        

    <div id="main">
      <p>Main</p>
    </div>

    <div id="sidebar">
      <p>Sidebar</p>
    </div>

</div>

CSS：

body{
    margin: 0 auto;
    padding: 0;
}

#header {
    background: green;
    height: 100px;
    min-width: 865px;          /* Optional: This size is the same as #container width. */
}

#container{
    display: table;
    width: 100%;
    min-width: 865px;
    height: 50px;
}

#main {
    display: table-cell;
    /*min-width: 622px;*/     /* Not needed since #container min-width less #sidebar width will use remainder percentage space (since #container is set at 100%) */
    height: 100%;             /* Maximum height is set via #container height */
    background: red;
}

#sidebar {
    display: table-cell;
    width: 243px;            /* The fixed width of the sidebar */
    height: 100%;            /* Maximum height is set via #container height */
    background: aqua;
}
于 2012-07-27T05:12:30.823 回答