有垂直的专栏的水平的网站

Question

我正在尝试在css中创建此布局：

一些博客（例如http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/）提到最好的方法是使用表格布局。它实际上是有效的，但问题是我无法滚动各个垂直面板，它们总是占用它们的实际内容。我试图明确地为每个设置一个高度，但它总是被忽略。

CSS ：

main {

    width: 100%;
    overflow: auto;

    .cycle-progress{
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .cycle-progress > div{
        display: table-cell;
        width: 600px;
        height: 1000px;
        h1{
            background-color: #ffde17;
            text-transform: uppercase;
        }

    }

    .cycle-progress > div:nth-child(even){
        background-color: white;
    }

}

HTML

<main>

    <div class="cycle-progress">
        <!--ng-init="timeline =  $('.timeline').timeline()" -->
        <div ng-repeat="pc in production_cycles" ng-controller="ProductionCycleCtrl" data-pcid="{{pc.id}}">
            <h1 class="text-center m-t-none">{{pc.name}}</h1>
            <div class="row">
                <div class="col-lg-4 padder-lg">
                    <img src="/src/img/pc-init.svg" style="width: 200px" />
                </div>
                <div class="col-lg-8">

                    <div timeline class="timeline"></div>

                </div>
            </div>
            <!--<div style="height: 1000px; background-color: red"></div>-->
        </div>  
    </div>


</main>

Answer 1

根据需要占用尽可能多的水平空间的flexbox应该可以工作：

body {
  display: flex;
  max-height: 100vw;
  flex-direction: column;
}

.container {
  display: flex;
  width: fit-content;
}

.column {
  max-height: 100%
  overflow-y: auto;
}

对于不支持flexbox的浏览器，将列设置为内嵌块，将其父设置为无包装可能也有效。

Answer 2

如果您可以选择设置显式高度（正如我在帖子中看到的那样），那么解决方案很简单。

使用div将所有内容整合到表格单元格中，然后设置height和overflow。

HTML：

<div ng-repeat="pc in production_cycles" ng-controller="ProductionCycleCtrl" data-pcid="{{pc.id}}">
    <div class="wrapper-element">
        <h1 class="text-center m-t-none">{{pc.name}}</h1>
        <div class="row">
            <!--more content-->
        </div>
    </div>
</div>

CSS：

.cycle-progress > div {
  display: table-cell;
  width: 600px;
  > .wrapper-element {
     height: 1000px;
     overflow: auto;
  }
}