Question

请帮我解决问题。我有简单的页面结构，绝对潜水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>

Answer 1

您需要在内容包装器父容器上设置溢出：

#content-wrapper {
  overflow: auto;
}

overflow: hidden将在没有滚动的情况下隐藏溢出。有more options

内容溢出父绝对div

1 个答案: