2

我的CSS：

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: 100%;
  overflow: scroll;
  position: absolute;
}

#content {
  background-color: #fff;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
}

我想要的是： 在此处输入图像描述

我得到什么： 在此处输入图像描述

红色=绝对标题
白色=带有“蓝色”滚动条的#main
绿色=带有文本的#content边框。

我想这很容易解决，但尝试了很长时间后我仍然无法解决：P

更新/简化 jsfiddle：http: //jsfiddle.net/YAgW2/9/

4

4 回答 4

0

添加浮动：左；to #content 解决了显示问题！

于 2012-05-30T08:36:07.653 回答
0

你能不能移动#content到#main你想要的地方，即在上面#main？

于 2012-05-21T11:35:58.930 回答
0

你的 CSS 应该是：

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: auto;
  overflow: scroll;
  position: absolute;
}

#content {
  background-color: #fff;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
  width:auto;
}
于 2012-05-21T11:43:26.227 回答
0

使用以下CSS：

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: 100%;
  overflow: scroll;
  position: absolute;
  background-color: green;
}

#content {
  white-space: nowrap;
  padding: 5px;
  color: white;
  background-color: red;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
}

以及以下HTML：

<div>
<div id="main">

</div>
<div id="content" style="position:absolute">
    Try to extend this text
    </div>
</div>
于 2012-05-21T11:47:09.860 回答