オーバーフローを絶対配置されたコンテナに適用する

Question

私はdivにチャートのような情報を含んでいます。 containerとしましょう。 containerの中に私は他の2つを持っていますdivs。 1つのdivは日付のあるヘッダーで、もう1つはdivです。ヘッダー/日付divを固定したいと思っています。したがって、ユーザーがスクロールするときにユーザーに従います。私はそれが位置のためにoverflow: hidden CSSスタイルを削除することが問題です。 divまたはposition: absoluteと書かれたdivで、まだoverflow: hiddenを保持する方法はありますか？

ここでは簡単なJSFiddleの例を示します。あなたがこの要素の上に固定されたwidthを設定する必要が動作するように.titleSection-right上の所望のカットオフポイントoverflow:hiddenため

https://jsfiddle.net/2m16rtjp/1/

Answer 1

を見るために.titleSection-rightからCSSスタイルposition: fixedを削除します。この場合の幅はparentの幅と同じである必要があります。それぞれ.rightSideの幅はパーセントです。

$(function() { 
 

 
    var maxWidth = $(".rightSide").width() 
 
     $(".titleSection-right").width(maxWidth) 
 
    var dates = ['7/1/2016', '7/2/2016', '7/3/2016', '7/4/2016', '7/5/2016', 
 
       '7/6/2016', '7/7/2016', '7/8/2016', '7/9/2016', '7/1/2016', 
 
       '7/2/2016', '7/3/2016', '7/4/2016', '7/5/2016', '7/6/2016', '7/7/2016']; 
 
    var employees = ['Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
 
        'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', ]; 
 
    var employeeProjections = ['Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
 
           'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
 
           'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
 
           'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
 
           'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
 
           'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll']; 
 
    
 
    var container = $('#container'); 
 
    var leftSide = $('.leftSide'); 
 
    var rightSide = $('.rightSide'); 
 
    var titleSectionLeft = $('.titleSection-left'); 
 
    var titleSectionRight = $('.titleSection-right'); 
 
    var resources = $('.resources'); 
 
    var projections = $('.projections'); 
 
    
 
    
 
    
 
    createHeaderDates(); 
 
    createResources(); 
 
    createProjections(16); 
 
    
 
    function createHeaderDates() { 
 
     dates.forEach((date) => { 
 
      var dateDiv = $('<div class="date">' + date + '</div>'); 
 
      titleSectionRight.append(dateDiv); 
 
     }); 
 
    } 
 
    
 
    function createResources() { 
 
     employees.forEach((employee) => { 
 
      var employeeDiv = $('<div class="employee">' + employee + '</div>'); 
 
      resources.append(employeeDiv); 
 
     }); 
 
    } 
 
    
 
    function createProjections(numOfWeeks) { 
 
     employees.forEach((employee) => { 
 
      var projectionRow = $('<div class="projectionRow"></div>'); 
 
      for(var i = 0; i < numOfWeeks; i++){ 
 
       var projectionDiv = $('<div class="projection">' + employeeProjections[i] + '</div>'); 
 
       projectionRow.append(projectionDiv); 
 
      } 
 
      projections.append(projectionRow); 
 
     });  
 
    } 
 
});

body { 
 
    background-color: azure; 
 
} 
 
#container { 
 
    display: block; 
 
    height: 8000px; 
 
    width: 800px; 
 
    background-color: darkolivegreen; 
 
    margin: 0 auto; 
 
} 
 
.leftSide { 
 
    width: 14%; 
 
    display: inline-block; 
 
    background-color: forestgreen; 
 
    vertical-align: top; 
 
} 
 
.rightSide { 
 
    width: 85%; 
 
    display: inline-block; 
 
    background-color: cadetblue; 
 
    overflow: auto; 
 
} 
 
.titleSection-left { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.employee { 
 
    height: 30px; 
 
} 
 
.titleSection-right { 
 
    background-color: royalblue; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    position: fixed; 
 
    overflow:hidden; 
 
} 
 
.projectionRow { 
 
    white-space: nowrap; 
 
    height: 30px; 
 
} 
 
.projections { 
 
    display: inline-block; 
 
} 
 
.projection { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    margin-right: 10px; 
 
} 
 
.date { 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <div id='container'> 
 
      <div class='leftSide'> 
 
       <div class='titleSection-left'> 
 
        <label>Resource</label> 
 
       </div> 
 
       <div class='resources'></div> 
 
      </div> 
 
      <div class='rightSide'> 
 
       <div class='titleSection-right'></div> 
 
       <div class='projections'></div> 
 
      </div> 
 
     </div> 
 
    </body>

以下 jsfiddle

やスニペット：だから私は

var maxWidth = $(".rightSide").width() 
$(".titleSection-right").width(maxWidth) 

あなたのJSでこのようにこのコードを追加し、.titleSection-rightはwidth

.rightSideのこちらをご覧になります