1

我正在使用 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>
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 回答