2

フィドル

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

div をコンテナー.resultの下部に揃えるにはどうすればよいですか?#result

編集:#results sが多すぎ.resultて収まらない場合、 div はスクロールバーを取得する必要があります。overflow:auto以下のソリューションの一部と互換性がないようです。

4

3 に答える 3

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;
}
于 2013-05-11T06:23:02.587 に答える
1

これはあなたのを壊さないバージョンoverflow: autoです。

これがjsFiddle.

基本的に私がやっていることは、マークアップを十分な でラップして、 、およびCSS プロパティを使用しdivて、ラッパーをdivテーブルのように動作させることができるようにすることです。display: table;display: table-row;display: table-cell;

ラッピング マークアップが表のように動作するようになったので、 をdiv一番上の「行」の「セル」内に絶対に配置し、max-heightの 100%と のセットで一番下にくっつくようにoverflow設定できautoます。これは、ここに投稿した元の回答で使用したのとまったく同じ手法です。しかし、今ではmax-heightの100%が の一番上の行にとどまり、table以前に投稿した解決策で指摘された問題が解消されます。

関連する CSS クラスは次のとおりです。

#page {
    width: 40%;
    background-color: #ececec;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -20%;
    display: table;
    height: 100%;
}
#results, #input {
    display: table-row;
}
#results > div {
    display: table-cell;
    height: 100%;
    position:relative;
}
#results > div > div {
    overflow: auto;
    max-height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0px;
}
#input {
    height: 75px;
}
#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;
    overflow: auto;
    height: 100%;
}

編集した HTML は次のとおりです。

<div id="page">
    <div id="results">
        <div>
            <div>
                <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 class="result">y=mx+b</div>
                <div class="result">y=mx+b</div>
                <div class="result">y=mx+b</div>
                <div class="result">y=mx+b</div>
                <div class="result">y=mx+b</div>
                <div class="result">y=mx+b</div>
                <div class="result">y=mx+b</div>
                <div class="result">1+2</div>
            </div>
        </div>
    </div>
    <div id="input">
        <input id="eq" type="text" autofocus="" />
    </div>
</div>
于 2013-05-11T06:38:19.087 に答える
0

デモ: http://jsfiddle.net/H2qBH/1/こんな風にしたいですか.....

  #results {
  position: absolute;
top: 275px;
right: 0;
left: 0;
bottom:0px;
  }
于 2013-05-11T06:22:41.113 に答える