Question

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

当用户首次访问网页并按下＆＃34;绿色时，最大化窗口按钮＆＃34;至少在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;
}

Answer 1

参考： 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;
}

浮动左/右使窗口大小调整间隙

1 个答案: