Question

对不起，如果这是重复的话;特定的设计问题很难找到......

<div id="sidebar"></div>
<div id="top-expand"></div>
<div id="bottom-expand"></div>

侧边栏的固定宽度为200px;其他2个div每个都有一个固定的高度，如果我可以让它们以窗口的宽度拉伸，那将是理想的。

 ------------------------------------- 
|       |                             |  
|       |        top-expand           |
|sidebar|-----------------------------|
|       |                             |
|       |       bottom-expand         |
 -------------------------------------

侧边栏：固定宽度;
top-expand：固定高度; bottom-expand：固定高度;

是否有可能让侧边栏保持固定宽度并仅用CSS堆叠其旁边的两个div？我并不反对使用jQuery来处理窗口计算，但是拥有这部分的原生css / html表示会很好

感谢您的建议=）

Answer 1

是的，有可能。将所有内容全部包含在<div> position: relative中，绝对放置侧边栏，并为其他两个<div>提供与边栏宽度相匹配的左边距。

例如：

<div id="outer">
    <div id="sidebar">pancakes</div>
    <div id="top-expand"></div>
    <div id="bottom-expand"></div>
</div>

CSS：

#outer {
    position: relative;
}
#sidebar {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: #00f;
}
#top-expand {
    height: 100px;
    margin-left: 100px; /* Matches the #sidebar width */
    background: #0f0;
}
#bottom-expand {
    height: 100px;
    margin-left: 100px; /* Matches the #sidebar width */
    background: #f00;
}

实例：http://jsfiddle.net/ambiguous/kRs54/1/

我正在使用背景颜色来区分块和较小的尺寸，以便在jsfiddle结果区域中很好地适应。

块元素（例如<div>）会消耗所有可用宽度减去其边距，除非您另行指定，因此您只需为#top-expand和#bottom-expand元素提供足够大的左边距以适应accomadata #sidebar。当左侧边缘比侧边栏高时，左侧边缘也会将右侧边块保持在正确的位置。

Answer 2

这适用于Chrome。

#sidebar{
    border:1px solid red;
    width:200px;
    height:400px;
    float:left;
}

#top-expand{
    border:1px solid blue;
    height:200px;
    margin-left:200px;  
}

#bottom-expand{
    border:1px solid green;
    height:200px;
    margin-left:200px;
}

http://jsfiddle.net/jasongennaro/Y6dNt/

边框仅供显示。

侧边栏+ 2个扩展内容div

2 个答案: