内容溢出父绝对 div答案

【问题标题】：Content overflows parent absolute div内容溢出父绝对 div
【发布时间】：2014-04-25 04:43:25
【问题描述】：

请帮我解决问题。我有简单的页面结构，绝对潜水 100% 高度作为内容包装器。我将我的内容（红色块）放在这个块内，每次它长于页面高度时，我的内容丑陋地溢出父 div。如何解决？这是快速链接的外观：http://bigmedved.ru/stack/

我需要一个没有滚动条的解决方案，当然还有隐藏的方式。

我的 CSS

@import url("bootstrap.css");

html, body {
  height:100%;
  width:100%;
  background-color: #4D5360;
  margin:0;
}

body > .row {
  margin-left: 0px;
  margin-right: 0px;

}

/*Page Structure*/

#main-wrap{
  position:absolute;
  width:100%;
  left:0;
  top:0;
  bottom: 0;
}

#responsive-admin-menu {
  position: absolute;
  width: 190px;
  height:auto !important;
  left:0px;
  top:67px;
  bottom:0px;
 z-index:20;
}

#content-wrapper {
position: absolute;
top: 52px;
padding:15px;
bottom:15px;
margin:15px 15px 0 0;
left: 190px;
height: auto !important;
right: 0px;
background:#f1f1f1;
box-shadow:0 0 3px 3px rgba(0,0,0,0.2);
}

#red {
    position:relative;
    color:#fff;
    background-color: #900;
}

我的 HTML：

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Mindblow</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
</nav>

<div id="main-wrap">
<div id="responsive-admin-menu">
ssss

</div>
<div id="content-wrapper">
<div id="red">
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
    <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
    <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>
  <p>Content Here </p>

</div>
</div>


</body>
</html>

【问题讨论】：

也许您需要将“#content-wrapper”的位置更改为相对位置？所以，所有内容（红色块）都将在其中。jsfiddle.net/gau9s

标签： html overflow absolute

【解决方案1】：

你需要在 content-wrapper 父容器上设置 overflow：

#content-wrapper {
  overflow: auto;
}

overflow: hidden 将隐藏溢出而不滚动。有more options

【讨论】：

感谢您的回答，但在这种情况下，我的内容将被隐藏或在溢出的情况下出现滚动条：自动。这两种变体都是不好的解决方案。