将div拉伸到最大尺寸

时间:2012-05-21 11:24:58

标签: html css

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

我想要的: enter image description here

我得到了什么: enter image description here

红色=绝对标题
白色= #main with" blue"滚动条
绿色= #content与其中的文本边界。

我想这很容易解决但是在尝试了很久之后我仍然无法管理:P

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

4 个答案:

答案 0 :(得分:0)

您是否可以将#content移到#main之外并将其定位在您想要的位置,即#main之上?

答案 1 :(得分: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;
}

答案 2 :(得分: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>

答案 3 :(得分:0)

添加浮动:左; #content解决了显示问题!