HTML
<div id="page"><div id="results"><div class="result">1+2</div>
<div class="result">3*4</div><div class="result">5/9</div>
<div class="result">y=mx+b</div></div><input id="eq" type="text" autofocus=""></div>
CSS
@import url(http://fonts.googleapis.com/css?family=Rokkitt);
body {
background-color: #444047;
margin: 0;
padding: 0;
}
#page {
width: 40%;
background-color: #ececec;
position: fixed;
top: 0;
bottom: 0;
left: 50%;
margin-left: -20%;
}
#results {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 75px;
}
#eq {
width: 96%;
margin-left: -48%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
border-width: 2px;
border-color: #9A9A9A #EEEEEE #EEEEEE #9A9A9A;
border-style: solid;
font-family: 'Rokkitt', serif;
letter-spacing: 1px;
font-size: 24pt;
padding: 5px 10px;
position: absolute;
bottom: 10px;
left: 50%;
}
#eq:focus {
border-color: #4E9FF2 #84B2E0 #84B2E0 #4E9FF2;
-webkit-box-shadow: 0 0 10px #007eff;
-moz-box-shadow: 0 0 10px #007eff;
-ms-box-shadow: 0 0 10px #007eff;
-o-box-shadow: 0 0 10px #007eff;
box-shadow: 0 0 10px #007eff;
outline: none;
}
#results {
font-family: 'Rokkitt', serif;
font-size: 16pt;
vertical-align: bottom;
text-align: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 5px;
display: table-cell;
overflow: auto;
}
.result {
padding: 2px;
}
.result + .result {
border-top: 1px dotted gray;
}
如何将.result
div与#result
容器的底部对齐?
修改:如果#results
太多,.result
div需要获得滚动条。 overflow:auto
似乎与以下某些解决方案不兼容。
答案 0 :(得分:4)
让我们清理你的烂摊子,将position: absolute;
的内部容器包裹在position: relative;
容器中,我从头开始制作,你可以看看
<div class="wrap">
<div class="inner_wrap">
<span>1+2</span>
<span>3*4</span>
<span>5/9</span>
<span>y=mx+b</span>
<span><input id="eq" type="text" autofocus="" /></span>
</div>
</div>
CSS(排除input
元素样式,但我已将其包含在演示小提琴中)
html, body {
background-color: #444047;
height: 100%;
}
.wrap {
width: 230px;
background: #ECECEC;
height: 100%;
margin: auto;
position: relative;
}
.wrap span {
display: block;
border-bottom: 1px dotted #515151;
padding: 5px;
font-size: 18px;
font-family: Arial;
}
div span:last-child {
border-bottom: 0;
}
.inner_wrap {
position: absolute;
bottom: 0;
}
答案 1 :(得分:1)
这是一个不会破坏overflow: auto
的版本。
这是 jsFiddle 。
基本上我正在做的是将标记包装在足够的div
中,以便我可以使包装div
的行为像表格display: table;
,{ {1}}和display: table-row;
CSS属性。
现在包装标记的行为就像一个表格,我绝对可以将display: table-cell;
放在顶部“行”中的“单元格”内,并将其设置为粘贴到底部,div
为max-height
及其100%
设置为overflow
。这是我在这里发布的原始答案中使用的完全相同的技术。但现在auto
的{{1}}将保留在max-height
的顶行,消除了您之前发布的解决方案所指出的问题。
以下是相关的CSS类:
100%
这是经过编辑的HTML:
table
答案 2 :(得分:0)
DEMO: http://jsfiddle.net/H2qBH/1/你想要这样......
#results {
position: absolute;
top: 275px;
right: 0;
left: 0;
bottom:0px;
}