Question

我正在使用Twitter引导程序，并且具有以下两个主要div元素（span6）。我想知道是否有一种方法可以让元素1（见下文）具有固定的垂直长度，而元素2仍然可以根据需要显示的数据垂直滚动，但内由元素1设置的视觉垂直长度。

作为附录，我一直在尝试使用background-color作为span6 div中的一个属性来获取背景色，但目前它没有显示任何内容......是否有任何我需要的属性加？

谢谢！

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

Answer 1

我可能完全错过了这里的一步，但这不是大致你想要在第一个问题中实现的目标吗？

<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/

将一个固定元件和一个可滚动元件彼此相邻对齐

1 个答案: