HTML/CSS Div（height：80px）over Div（height：100％;）

我尝试让我的主页布局能够正常工作。HTML/CSS Div（height：80px）over Div（height：100％;）

现在div“list”的高度应该比底部小80px。我用边距和位置做了一些测试：绝对的，但我无法得到它。

#body, #left, #map, #list { 
    height: 100%; 
} 

#left { 
    float:left; 
    width:270px; 
} 

#head { 
    height:80px; 
    background-color:blue; 
} 

#list { 
    overflow:auto; 
    background-color:green; 
} 

#map { 
    background-color:red; 
} 

<body > 
    <div id="left"> 
    <div id="head"> </div> 
    <div id="list"> </div> 
    </div> 
    <div id="map"> </div> 
</body>

这是应该的样子：

 280px  100% 
    ______________________ 
80px|head |map    | 
    |_____|    | 
    |list |    | 
    |  |    | 
    |  |    | 
100%|  |    | 
    |_____|________________|

这是怎么看起来像现在：

 280px  100% 
    ______________________ 
80px|head |map    | 
    |_____|    | 
    |list |    | 
    |  |    | 
    |  |    | 
100%|  |    | 
    |  |________________| 
    |  | 
    |_____|

在此先感谢

来源

2011-08-31 b0rn

需要的你试图做更多的描述。 – kinakuta

如果内容变长，则#list可滚动。但#list的高度应该受其父级的高度（#left）的限制 – b0rn

只是为了澄清; head是页面的顶部80px，map是页面的底部80px，并且列表扩展到其余部分？ – Demelziraptor

的问题是，你”不要为你的div指定高度（除了#head）。

如果您想让列表具有高度，可以选择指定直接高度为#left或#list。

有关#left高度设置为某种（而非100％）的示例，请参见here。

来源

2011-08-31 09:00:39

当然，我想高度动态调整浏览器的大小。 – b0rn

在这种情况下，错误（我认为）来自于你不应该使用'＃body'而是'body'而不使用'＃'的事实。 –

所以现在（因为你的答案）我明白你的问题。

为了解决它，以下需要：

添加position:absolute到#head
添加width:100%;到#head
position:relative添加到#left

说明：

绝对位置将把#head放在他最近父母的左上角。它的宽度将默认为0.所以我们需要把它设置为100％来取所有父宽度。然而，绝对定位div的参考是位置为absolute或relative（或身体如果没有匹配）的最接近父代。因此，我们将#left的位置设置为relative，以便让它具有#head的参考。没有absolute，因为我们不希望它被映射

粉碎

其他解决方案：

添加overflow-y:hidden;到#left

这样，从#left溢出在垂直轴上的一切，将不会显示。

您可以选择适合您需求的解决方案。其中一个（溢出的）将有底部切割。另一方面，顶部将被削减（或你需要添加一些padding-top避免）

希望有所帮助。

来源

2011-08-31 13:13:52

HTML/CSS Div（height：80px）over Div（height：100％;）

回答

相关问题