CSS CSS3 display:table, overflow-y:scroll 不起作用

在本文中，我们将介绍CSS中的display:table和overflow-y:scroll属性，并解释为什么在某些情况下它们可能不起作用。

CSS中的display:table属性可以将一个块级元素呈现为表格，使其具有类似表格的布局和属性。而overflow-y:scroll属性则用于定义横向溢出内容时是否显示滚动条。

阅读更多：CSS 教程

display:table 属性

display:table属性可以将块级元素设置为表格布局，使其具有类似于table元素的行为。通过使用表格布局，我们可以更好地控制元素的布局和外观，特别是在处理复杂的网格和栅格布局时。

以下是一个例子，演示如何使用display:table属性创建一个简单的表格布局：

.wrapper{
  display: table;
  width: 100%;
}

.row{
  display: table-row;
}

.cell{
  display: table-cell;
  padding: 10px;
  border: 1px solid black;
}

<div class="wrapper">
  <div class="row">
    <div class="cell">单元格1</div>
    <div class="cell">单元格2</div>
    <div class="cell">单元格3</div>
  </div>
  <div class="row">
    <div class="cell">单元格4</div>
    <div class="cell">单元格5</div>
    <div class="cell">单元格6</div>
  </div>
</div>

在上述例子中，我们将包含三个单元格的row元素设置为display:table-row，将每个单元格设置为display:table-cell。通过使用display:table和相关属性，我们可以创建出一个简单的表格布局。

但需要注意的是，display:table属性对于所有浏览器都是支持的，但在某些老旧的浏览器中，可能会对display:table的行为存在一定的差异。因此，在使用这个属性时，需要对不同浏览器的兼容性进行考虑。

overflow-y:scroll 属性

overflow-y:scroll属性的作用是通过定义纵向溢出内容时是否显示滚动条，来控制元素的溢出效果。

例如，当定义以下样式时：

.container{
  overflow-y: scroll;
  height: 200px;
  width: 200px;
}

<div class="container">
  <p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>
</div>

在上述例子中，当包含文本的.container元素高度超过200px时，会显示一个纵向滚动条，以使用户可以滚动查看全部的内容。

但需要注意的是，在有些情况下，特别是当包含元素具有display:table布局时，overflow-y:scroll属性可能会出现不起作用的问题。

overflow-y:scroll 不起作用

当使用display:table进行布局时，可能会导致overflow-y:scroll属性不起作用的问题。这是因为display:table元素本身具有自适应性质，会根据内容的大小自动调整元素的高度。

因此，在display:table布局中，当元素的内容高度小于或等于容器高度时，overflow-y:scroll属性不会生效，因为没有内容溢出。

以下是一个演示这个问题的例子：

.container{
  display: table;
  overflow-y: scroll;
  height: 200px;
  width: 200px;
}

.content{
  display: table-row;
  height: 50px;
}

<div class="container">
  <div class="content">内容1</div>
  <div class="content">内容2</div>
</div>

在上述例子中，无论设置overflow-y的值为何，由于内容不溢出容器，纵向滚动条不会显示出来。

解决 overflow-y:scroll 不起作用的方法

要解决overflow-y:scroll不起作用的问题，我们可以使用一些变通的方法来实现滚动效果。

一种常见的方法是将overflow-y:scroll属性应用于子元素，而不是直接应用于display:table的父元素。

以下是一个示例：

.container{
  display: table;
  height: 200px;
  width: 200px;
}

.content{
  overflow-y: scroll;
  height: 200px;
}

<div class="container">
  <div class="content">
    <div class="row">行1</div>
    <div class="row">行2</div>
    <div class="row">行3</div>
    <div class="row">行4</div>
    <div class="row">行5</div>
    <div class="row">行6</div>
  </div>
</div>

通过将overflow-y:scroll应用于子元素，我们可以实现预期的滚动效果。