带有滚动的Div网格在flexbox

时间：2017-06-24 12:32:56

标签： javascript html css css3 flexbox

我用div和flexbox创建了以下网格，但是我遇到了一些问题。 标题（我希望它被修复）与第一行重叠，我似乎无法正确滚动.....我该如何解决这个问题？我想过只在gridbody上放置overflow-y滚动，但这会创建一个额外的水平滚动条。

var data = [{
    "title": "Chicken Tortilla Soup!",
    "youTubeId": "B7JUzPTib9A",
    "rating": 0.9708955223880597,
    "views": 73693,
    "thumbnail": "https://i.ytimg.com/vi/B7JUzPTib9A/mqdefault.jpg",
    "length": 265
  },
  {
    "title": "Chicken Pot Pie Soup | Delish",
    "youTubeId": "qAY4oWKY9kg",
    "rating": 0.9782608695652174,
    "views": 6704,
    "thumbnail": "https://i.ytimg.com/vi/qAY4oWKY9kg/mqdefault.jpg",
    "length": 65
  },
  {
    "title": "HOMEMADE CHICKEN NOODLE SOUP",
    "youTubeId": "8J4HYnlBU7M",
    "rating": 0.9654550141789121,
    "views": 190886,
    "thumbnail": "https://i.ytimg.com/vi/8J4HYnlBU7M/mqdefault.jpg",
    "length": 215
  },
  {
    "title": "3 Easy Homemade Chicken Soup Recipes",
    "youTubeId": "QN6DBEVL0rU",
    "rating": 0.9938524590163934,
    "views": 22353,
    "thumbnail": "https://i.ytimg.com/vi/QN6DBEVL0rU/mqdefault.jpg",
    "length": 461
  },
  {
    "title": "Slow Cooker Chicken Noodle Soup",
    "youTubeId": "VgFHbHZDc4I",
    "rating": 0.9736842105263158,
    "views": 4534,
    "thumbnail": "https://i.ytimg.com/vi/VgFHbHZDc4I/mqdefault.jpg",
    "length": 97
  },
  {
    "title": "Slow-Cooker Chicken Tortilla Soup | Delish",
    "youTubeId": "Zf858LPRNRc",
    "rating": 1,
    "views": 13645,
    "thumbnail": "https://i.ytimg.com/vi/Zf858LPRNRc/mqdefault.jpg",
    "length": 56
  },
  {
    "title": "Crock Pot Chicken Noodle Soup Recipe",
    "youTubeId": "kpSFAZTvHrc",
    "rating": 0.9675810473815462,
    "views": 40056,
    "thumbnail": "https://i.ytimg.com/vi/kpSFAZTvHrc/mqdefault.jpg",
    "length": 363
  },
  {
    "title": "Chicken Tortellini Soup - Lynn's Recipes",
    "youTubeId": "kS6yykyOwUE",
    "rating": 0.9777777777777777,
    "views": 2675,
    "thumbnail": "https://i.ytimg.com/vi/kS6yykyOwUE/mqdefault.jpg",
    "length": 180
  },
  {
    "title": "Chicken Tortilla Soup- Lynn's Recipes",
    "youTubeId": "kJI3bHL3ZW0",
    "rating": 0.9620253164556962,
    "views": 6814,
    "thumbnail": "https://i.ytimg.com/vi/kJI3bHL3ZW0/mqdefault.jpg",
    "length": 416
  }
];

loadData();

function loadData() {
  $(".gridBody").empty();
  $.each(data, function(index, item) {
    let row = $("<div>", {
      class: "gridRow"
    });
    $.each(item, function(key, value) {
      let cell = $("<div>", {
        class: "gridCell",
        text: value
      });
      $(row).append(cell);
    });
    $(".gridBody").append(row);
  });
}
html,
body {
  height: 100%;
}

#main {
  height: 100%;
  width: 80%;
  margin: 0 auto;
}

.grid {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  height: 80%;
}

.gridHeader {
  height: 100px;
}

.gridBody {
  overflow-y: scroll;
}

.gridHeader,
.gridRow {
  display: flex;
}

.gridHeader .gridCell {
  font-weight: bold;
}

.gridCell {
  border: 1px solid #000;
  min-width: calc(100% / 6);
  padding: 10px;
  word-break: break-word;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="grid">
    <div class="gridHeader">
      <div class="gridCell">Title</div>
      <div class="gridCell">youtubeid</div>
      <div class="gridCell">Rating</div>
      <div class="gridCell">Views</div>
      <div class="gridCell">Thumbnail</div>
      <div class="gridCell">Length</div>
    </div>
    <div class="gridBody">
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

Flex容器的初始设置为flex-shrink: 1。这意味着允许弹性项目缩小以适合容器。这会导致您的标头缩短到指定的height: 100px并导致重叠的行。

您需要覆盖此默认设置。试试这个：

.gridHeader {
   height: 100px;
   flex-shrink: 0;
}

或者，甚至更好，

.gridHeader {
   flex: 0 0 100px;
}

（完整说明：What are the differences between flex-basis and width?）

其次，因为垂直滚动条占据网格主体中的空间，所以它会破坏列与固定标题的对齐。这是一个棘手的情况。这是一个可能的解决方案：

＆＃13;
＆＃13; 
var data = [
  {
      "title": "Chicken Tortilla Soup!",
      "youTubeId": "B7JUzPTib9A",
      "rating": 0.9708955223880597,
      "views": 73693,
      "thumbnail": "https://i.ytimg.com/vi/B7JUzPTib9A/mqdefault.jpg",
      "length": 265
    },
    {
      "title": "Chicken Pot Pie Soup | Delish",
      "youTubeId": "qAY4oWKY9kg",
      "rating": 0.9782608695652174,
      "views": 6704,
      "thumbnail": "https://i.ytimg.com/vi/qAY4oWKY9kg/mqdefault.jpg",
      "length": 65
    },
    {
      "title": "HOMEMADE CHICKEN NOODLE SOUP",
      "youTubeId": "8J4HYnlBU7M",
      "rating": 0.9654550141789121,
      "views": 190886,
      "thumbnail": "https://i.ytimg.com/vi/8J4HYnlBU7M/mqdefault.jpg",
      "length": 215
    },
    {
      "title": "3 Easy Homemade Chicken Soup Recipes",
      "youTubeId": "QN6DBEVL0rU",
      "rating": 0.9938524590163934,
      "views": 22353,
      "thumbnail": "https://i.ytimg.com/vi/QN6DBEVL0rU/mqdefault.jpg",
      "length": 461
    },
    {
      "title": "Slow Cooker Chicken Noodle Soup",
      "youTubeId": "VgFHbHZDc4I",
      "rating": 0.9736842105263158,
      "views": 4534,
      "thumbnail": "https://i.ytimg.com/vi/VgFHbHZDc4I/mqdefault.jpg",
      "length": 97
    },
    {
      "title": "Slow-Cooker Chicken Tortilla Soup | Delish",
      "youTubeId": "Zf858LPRNRc",
      "rating": 1,
      "views": 13645,
      "thumbnail": "https://i.ytimg.com/vi/Zf858LPRNRc/mqdefault.jpg",
      "length": 56
    },
    {
      "title": "Crock Pot Chicken Noodle Soup Recipe",
      "youTubeId": "kpSFAZTvHrc",
      "rating": 0.9675810473815462,
      "views": 40056,
      "thumbnail": "https://i.ytimg.com/vi/kpSFAZTvHrc/mqdefault.jpg",
      "length": 363
    },
    {
      "title": "Chicken Tortellini Soup - Lynn's Recipes",
      "youTubeId": "kS6yykyOwUE",
      "rating": 0.9777777777777777,
      "views": 2675,
      "thumbnail": "https://i.ytimg.com/vi/kS6yykyOwUE/mqdefault.jpg",
      "length": 180
    },
    {
      "title": "Chicken Tortilla Soup- Lynn's Recipes",
      "youTubeId": "kJI3bHL3ZW0",
      "rating": 0.9620253164556962,
      "views": 6814,
      "thumbnail": "https://i.ytimg.com/vi/kJI3bHL3ZW0/mqdefault.jpg",
      "length": 416
    }
];

loadData();

function loadData() {
  $(".gridBody").empty();
  $.each(data, function(index, item) {
    let row = $("<div>", { class: "gridRow" });
    $.each(item, function(key, value) {
      let cell = $("<div>", { class: "gridCell", text: value });
      $(row).append(cell);
    });
    $(".gridBody").append(row);
  });
}
＆＃13; 
html, body {
  height: 100%;
}

#main {
  height: 100%;
  width: 80%;
  margin: 0 auto;
}

.grid {
  background-color: #fff; 
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  height: 80%;
}

.gridHeader {
  flex: 0 0 100px;   /* new */
}

.gridBody {
  overflow-y: scroll;
}

.gridHeader, 
.gridRow {
  display: flex;
}

.gridHeader .gridCell {
  font-weight: bold;
}

.gridCell {
  border: 1px solid #000;
  min-width: calc(100% / 6);
  padding: 10px;
  word-break: break-word;
  text-align: center;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="grid">
    <div class="gridHeader">
      <div class="gridCell">Title</div>
      <div class="gridCell">youtubeid</div>
      <div class="gridCell">Rating</div>
      <div class="gridCell">Views</div>
      <div class="gridCell">Thumbnail</div>
      <div class="gridCell">Length</div>
    </div>
    <div class="gridBody">
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将box-sizing: border-box;添加到.gridCell。另外，我想将overflow-y: scroll转为overflow-y: overlay;。 另外，您需要将height: 100px;更改为min-height: 100px;作为标题。

var data = [
  {
      "title": "Chicken Tortilla Soup!",
      "youTubeId": "B7JUzPTib9A",
      "rating": 0.9708955223880597,
      "views": 73693,
      "thumbnail": "https://i.ytimg.com/vi/B7JUzPTib9A/mqdefault.jpg",
      "length": 265
    },
    {
      "title": "Chicken Pot Pie Soup | Delish",
      "youTubeId": "qAY4oWKY9kg",
      "rating": 0.9782608695652174,
      "views": 6704,
      "thumbnail": "https://i.ytimg.com/vi/qAY4oWKY9kg/mqdefault.jpg",
      "length": 65
    },
    {
      "title": "HOMEMADE CHICKEN NOODLE SOUP",
      "youTubeId": "8J4HYnlBU7M",
      "rating": 0.9654550141789121,
      "views": 190886,
      "thumbnail": "https://i.ytimg.com/vi/8J4HYnlBU7M/mqdefault.jpg",
      "length": 215
    },
    {
      "title": "3 Easy Homemade Chicken Soup Recipes",
      "youTubeId": "QN6DBEVL0rU",
      "rating": 0.9938524590163934,
      "views": 22353,
      "thumbnail": "https://i.ytimg.com/vi/QN6DBEVL0rU/mqdefault.jpg",
      "length": 461
    },
    {
      "title": "Slow Cooker Chicken Noodle Soup",
      "youTubeId": "VgFHbHZDc4I",
      "rating": 0.9736842105263158,
      "views": 4534,
      "thumbnail": "https://i.ytimg.com/vi/VgFHbHZDc4I/mqdefault.jpg",
      "length": 97
    },
    {
      "title": "Slow-Cooker Chicken Tortilla Soup | Delish",
      "youTubeId": "Zf858LPRNRc",
      "rating": 1,
      "views": 13645,
      "thumbnail": "https://i.ytimg.com/vi/Zf858LPRNRc/mqdefault.jpg",
      "length": 56
    },
    {
      "title": "Crock Pot Chicken Noodle Soup Recipe",
      "youTubeId": "kpSFAZTvHrc",
      "rating": 0.9675810473815462,
      "views": 40056,
      "thumbnail": "https://i.ytimg.com/vi/kpSFAZTvHrc/mqdefault.jpg",
      "length": 363
    },
    {
      "title": "Chicken Tortellini Soup - Lynn's Recipes",
      "youTubeId": "kS6yykyOwUE",
      "rating": 0.9777777777777777,
      "views": 2675,
      "thumbnail": "https://i.ytimg.com/vi/kS6yykyOwUE/mqdefault.jpg",
      "length": 180
    },
    {
      "title": "Chicken Tortilla Soup- Lynn's Recipes",
      "youTubeId": "kJI3bHL3ZW0",
      "rating": 0.9620253164556962,
      "views": 6814,
      "thumbnail": "https://i.ytimg.com/vi/kJI3bHL3ZW0/mqdefault.jpg",
      "length": 416
    }
];

loadData();

function loadData() {
  $(".gridBody").empty();
  $.each(data, function(index, item) {
    let row = $("<div>", { class: "gridRow" });
    $.each(item, function(key, value) {
      let cell = $("<div>", { class: "gridCell", text: value });
      $(row).append(cell);
    });
    $(".gridBody").append(row);
  });
}
html, body {
  height: 100%;
}

#main {
  height: 100%;
  width: 80%;
  margin: 0 auto;
}

.grid {
  background-color: #fff; 
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  height: 80%;
}

.gridHeader {
  min-height: 100px;
}

.gridBody {
  overflow-y: scroll;
}

.gridHeader, 
.gridRow {
  display: flex;
}

.gridHeader .gridCell {
  font-weight: bold;
}

.gridCell {
  border: 1px solid #000;
  min-width: calc(100% / 6);
  padding: 10px;
  word-break: break-word;
  text-align: center;
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="grid">
    <div class="gridHeader">
      <div class="gridCell">Title</div>
      <div class="gridCell">youtubeid</div>
      <div class="gridCell">Rating</div>
      <div class="gridCell">Views</div>
      <div class="gridCell">Thumbnail</div>
      <div class="gridCell">Length</div>
    </div>
    <div class="gridBody">
    </div>
  </div>
</div>

相关问题
最新问题