Question

我总共有4个div：

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

它们的设置如下：

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

容器的位置为：relative和overflow：hidden

子菜单和conent有浮动：左边有用于定位的边距

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

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

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

----- ------编辑

<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;   
}

Answer 1

我还没有找到一种简单的方法来使div 100％的父元素的高度。我过去一直在欺骗：而不是试图制作＆lt; sidebar＆gt;伸展到100％高度，我在＆lt; container＆gt;中使用垂直背景拉伸。创建侧边栏所在的条带，并使＆lt; sidebar＆gt; BG-透明。这样，无论＆lt;侧边栏＆gt;的高度如何。是的，总会有一种幻觉，它是＆lt; container＆gt;高度的100％。

一旦你有了这个，只要确保你的图像没有像你描述的那样被裁剪，它应该是相同的效果。虽然，我不知道这对你有用，如果你不了解更多关于你想要完成的事情。希望这有帮助！

在绝对定位的div上折叠保证金？

1 个答案: