我的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 with" blue"滚动条
绿色= #content与其中的文本边界。
我想这很容易解决但是在尝试了很久之后我仍然无法管理:P
更新/简化的jsfiddle: http://jsfiddle.net/YAgW2/9/
答案 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解决了显示问题!