内容溢出而不是exp

Question

过去一天我一直在努力解决这个问题，而且我似乎无法理解（也没有解决）这个问题。

问题是内容溢出了＆＃34;侧边栏＆＃34; div，而不是扩展它，当没有＆＃34;主要＆＃34;内容比＆＃34;侧边栏＆＃34;内容。 （如下图所示）。

Here's a JSFiddle!

#sidebar为position: absolute;，因为我使用left: 0;和left: -200;来显示和隐藏侧边栏。 #sidebar-handle也很重要，因为我有一个点击事件监听器和一个连接到它的悬停动画，目的是为#sidebar切换显示和隐藏。 （切换显示和隐藏时，我也会更改margin-left的{​​{1}}。

有人有解决方案吗？

我当然正在寻找纯CSS解决方案以及适用于主流浏览器的解决方案。

CSS

#main

HTML

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;

    color: #333;
    background-color: #EEE;
}

#container {
    height: 100%;
    min-height: 100%;
}

#header {
    height: 50px;

    background-color: #303030;

    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

#header-content {
    height: 100%;
}

#sidebar {
    width: 210px;
    min-height: 100%;

    position: absolute;
    left: 0;
    top: 50px;
    bottom: 0;

    background-color: #404040;

    -webkit-box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
}

#sidebar-content {
    width: 200px;

    position: absolute;
    left: 0;

}

#sidebar-handle {
    width: 10px;

    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;

    background-color: #303030;
    border-left: 1px solid #272727;
}

#main {
    margin-left: 210px;
    padding: 30px;
}



ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

li {
    margin: 0;
    margin-top: 16px;
    background-color: #AAA;
}

p {
    margin-top: 0;
}

Answer 1

从侧边栏移除bottom: 0，将其限制为窗口的高度。

删除侧栏内容上的绝对定位，以便它不会从流程中取出。这样它可以影响侧边栏的大小。

演示：http://jsfiddle.net/Guffa/gfu1snhm/3/

我不知道在某些其他情况下这是否会产生一些不良影响，但它可以解决这种情况，并且可以帮助您了解它为什么会这样做。

Answer 2

删除具有绝对和设置边距的行：0;