1

私はTwitterブートストラップを使用しており、次の2つの主要なdiv要素を並べて使用しています(両方span6)。要素1(以下を参照)の垂直方向の長さを固定し、要素2は表示する必要のあるデータに基づいて垂直方向にスクロールできるようにする方法があるのではないかと思っていましたが、視覚的な垂直方向の範囲内です。要素1によって設定された長さ。

補遺としてbackground-color、span6 divの1つで属性として使用して背景に色を付けようとしましたが、現在何も表示されていません...追加する必要のある属性はありますか?

ありがとう!

 ------------  ------------
|            ||            |
|   fixed    ||scroll-able |
|   element  ||  element   |
|            ||            |
|     1      ||     2      |
|            ||            |
 ------------  ------------

補遺

ここに私のCSS:

.principal-element {
  overflow: hidden;
  background-color: #006faa;
  background-color:#C0C0C0;
  height:900px;
  position:fixed;
  float:left;
  h1 {
    color: white;
  }
}

.secondary-element {
  overflow: scroll;
}

そして、htmlに表示されるもの:

<div class="container">
<div class="span6">
    <div class="principal-element">
        <h1><%= link_to "Text and stuff", "#" %></h1>
    </div>
</div>

<div class ="span6 offset6">
    <div class="secondary-element">
        <ol class="microposts">
            <li> Blah blah a lot of stuff
            </li>
        </ol>
    </div>
</div>
</div>
4

1 に答える 1

3

私はここで完全に一歩を逃しているかもしれませんが、これはあなたが最初の問題で達成しようとしていることとほぼ同じではありませんか?

<html>

    <div class="element one">
        <p>content</p>
    </div>

    <div class="element two">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>

</html>

<style>

    div.element {
    width:200px;
    background-color:#C0C0C0;
    height:90px;
    color:#606060;
    font-family:Arial;
    font-size:12px;
    padding:10px;
    position:fixed;
    float:left;
    }

    div.two {
    overflow:scroll;
    margin-left:240px;
    }

</style>

http://jsfiddle.net/QYtsr/2/

于 2013-02-07T01:42:40.840 に答える