1

我总共有 4 个 div：

1 个容器 1 个子菜单 1 个内容 1 个侧边栏

它们是这样设置的：

<container>
     <submenu></submenu>
     <content></content>
     <sidebar></sidebar>
</container>

容器具有位置：相对和溢出：隐藏

子菜单和内容有 float:left 用于定位的边距

侧边栏绝对位于右侧（浮动将不起作用，因为子栏会影响布局。

我有在侧边栏中垂直列出的图像，但它们被容器截断。如果我浮动或将位置设置为相对，它将正确包含侧边栏。我在侧边栏之后尝试了一个明确的修复，但这不起作用。

这是我经常遇到的问题之一。有什么建议么？

- - -编辑 - - - 

<div id="content">
    <div id="submenu">
    </div>
    <div id="contentBox">   
    </div>
    <div id="sidebar">
    </div>
</div>

#content
{
    margin: -22px auto 0 auto;
    overflow: hidden;
    padding: 0 10px 10px 10px;
    position: relative;
    text-align: left;
    width: 961px;
}

#submenu
{
    background-color: #001a28;
    border: 5px #008da8 solid;
    float: left;
    margin: -20px 0 0 -10px;
    padding-top: 20px;
    width: 700px;
}

#contentBox 
{
    background-color: #ffffff;
    float: left;
    margin: 10px 0 10px -10px;
    width: 710px;
}

#sidebar
{
    border-left: 5px #008da8 solid;
    border-right: 5px #008da8 solid;
    background-color: #ffffff;
    display: block;
    height: 100%;
    position: relative;
    float: right;
    text-align: center;
    right: 10px;
    top: -10px;
    width: 207px;   
}
4

1 回答 1

0

我还没有找到一种简单的方法来使 div 达到父元素高度的 100%。过去我可以作弊：我没有尝试让 <sidebar> 拉伸到 100% 的高度，而是在 <container> 中使用垂直背景拉伸来创建侧边栏所在的条纹，并让 <侧边栏> bg-透明。这样，无论 <sidebar> 的高度是多少，总会有一种错觉，认为它是 <container> 高度的 100%。

一旦你有了它，只要确保你的图像没有像你描述的那样被裁剪，它应该是相同的效果。不过，如果不了解您要完成的工作，我无法判断这是否对您有用。希望这可以帮助！

于 2010-11-29T22:09:18.963 回答