Question

我对此很新，如果这是一个愚蠢的问题，那就很抱歉

我正在尝试使用基础6实现垂直分割布局，该网站应占据浏览器窗口的整个宽度和高度。

理想情况下，右侧将包含比其中更多的信息，因此它需要一个单独的滚动条，它不会影响页面高度。

我尝试将其包含在div中并添加以下样式 height: 100% ; overflow: scroll;

但要么什么都没有发生，要么布局完全破坏，所以我开始认为它可能与我的列和行布局有关。

到目前为止，所有内容都是单行，并且运行良好，并且可以很好地缩小到移动视图，但我感觉不好我正在做的事情是错误的。

到目前为止，这是我的代码:(为新手语法道歉）

<body>
<div class="row full-width large-collapse">
<div class="large-6 medium-12 small-12 columns imgleft"></div>


        <div class="large-6 medium-12 small-12 columns">
            <div class="expanded button-group">
              <a class="button">BUTTON 1</a>
              <a class="button">BUTTON 2</a>
            </div>
        </div>

    <div class="content”>

        <div class="large-6 medium-12 small-12 columns">
            <div class="callout secondary">
              <h5>Panel Heading</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              <a href="#">More</a>
            </div>
        </div>

        <div class="large-6 medium-12 small-12 columns">
            <div class="callout secondary">
              <h5>Panel Heading</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              <a href="#">More</a>
            </div>
        </div>

    <!—x10 More of these callouts—>

    </div>
</div>
</body>


.row.full-width {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: none;
    margin: none;
}

.imgleft {
    background-image: url('/img/imgedit.jpg');
    height: 100%;
}

.content {
    height: 100%;
    overflow-y: scroll;
}

我希望这是有道理的......

我还看过嵌套，偏移，改变图像的位置和一些jquery解决方案，而且我还没有找到解决方案

由于

基础6垂直分割布局

0 个答案: