Question

如何使用CSS属性允许具有嵌套override func viewDidLoad() { ref = Database.database().reference() ref?.child("users").child(user).child("Orders").observe(.value, with: { (snapshot) in let values = snapshot.value as? [String: AnyObject] let order = values!["Order"] as! String let date = values!["Date"] as! Int print("order \(order)") //This prints correctly print("date \(date)") //This prints correctly self.firOrder.append(order) self.firDate.append(date) }) print(firOrder) //This prints empty and does not append to array. print(firDate) //This prints empty and does not append to array }且嵌套了div的{{1}}定义了绝对位置，从而能够滚动div的定义位置s不在其父母div之外？

我将我的项目精简为（希望）仅包含下面您需要的内容，并且我认识到有很多更干净的方法可以用来处理我在此处演示的示例，但是我想这值得一提，因为有人可能有我（和其他人）可以学习的见识。在我的示例中，有div个“框”（其中有div个）放在class=stuffbox（有div个）的内部，它们溢出了父级的垂直边界class=innerstuffcols。

div

    #mainHeader {
	    background-color: #999999;
	    color: #ffffff;
	    position: absolute;
	    width: 100%;
	    height: 5%;
	    left: 0;
	    top: 0;
    }

    #mainPlace {
        position:absolute;
	    width:100%;
	    height:95%;
	    left:0;
	    top:5%;
	    overflow:hidden;
    }

    #mainTable {
	    position:absolute;
	    left:0;
	    height:100%;
	    width: 85%;
	    overflow:hidden;
    }

    #mainMenu {
	    position:absolute;
	    left:85%;
	    right:0;
	    height:100%;
    }


    #tablebody {
	    height: 100%;
	    width: 100%;
    }

    th.tableheaders {
	    border:1px solid black;
	    height: 5%
    }

    td.someCols {
	    border:1px solid black;
    }

    table, th, td {
    	border-collapse: collapse;
    }

    div.innerstuffCols {
	    height: 100%;
	    width:100%;
	    overflow-y: auto;
	    overflow-x: hidden;
    }

    div.stuffbox {
	    height:200px;
	    position:absolute;
	    width:200px;
	    left:5px;
    	text-align: center;
    	background-color: #f1f1f1;
    }

如上所述，我知道在我的示例所介绍的范围内，有更好的方法可以做到这一点（使立场不同于绝对立场等），但由于与大型项目有关的各种原因，（目前是出于学术上的好奇心），我更希望看到一个解释，说明如何使上面的示例正常工作，同时保持这些<html lang="en-US"> <head> <meta charset="utf-8"> <title>stuff</title> <link rel="stylesheet" href="st.css"> </head> <body> <div id="mainHeader"> <p align="center"> random header here </p> </div> <div id="mainPlace"> <div id="mainTable"> <table style='width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;border:1px solid black'> <tr id='tableheader'> <th class='tableheaders'>header 1</th> <th class='tableheaders'>header 2</th> </tr> <tr id='tablebody'> <td class='someCols'> <div class='innerstuffCols'> <div class='stuffbox' style='top:55px;'> stuff 1 </div> <div class='stuffbox' style='top:265px;'> stuff 2 </div> <div class='stuffbox' style='top:475px;'> stuff 3 </div> <div class='stuffbox' style='top:685px;'> stuff 4 </div> <div class='stuffbox' style='top:895px;'> stuff 5 </div> <div class='stuffbox' style='top:1105px;'> stuff 6 </div> </div> </td> <td class='someCols'> <div class='innerstuffCols'> some other stuff </div> </td> </tr> </table> </div> <div id="mainMenu"> <p> some stuff here </p> </div> </div> </body> </html>的绝对位置。

很抱歉，如果问题的措辞不佳（请告诉我，我会再对此进行尝试），但希望示例可以使我的意图清楚。

谢谢。

Answer 1

使用position:relative可使绝对定位的元素相对于该容器定位，并使用overflow:scroll使其可滚动。（您也可以省略div并直接在表cel上执行此操作。）

#mainHeader {
  background-color: #999999;
  color: #ffffff;
  position: absolute;
  width: 100%;
  height: 5%;
  left: 0;
  top: 0;
}

#mainPlace {
  position: absolute;
  width: 100%;
  height: 95%;
  left: 0;
  top: 5%;
  overflow: hidden;
}

#mainTable {
  position: absolute;
  left: 0;
  height: 100%;
  width: 85%;
  overflow: hidden;
}

#mainMenu {
  position: absolute;
  left: 85%;
  right: 0;
  height: 100%;
}

#tablebody {
  height: 100%;
  width: 100%;
}

th.tableheaders {
  border: 1px solid black;
  height: 5%
}

td.someCols {
  border: 1px solid black;
}

table,
th,
td {
  border-collapse: collapse;
}

.innerstuffCols {
  position: relative;
  overflow-y: scroll;
  width: 100%; 
  height: 100%;
}

div.stuffbox {
  height: 200px;
  position: absolute;
  width: 200px;
  left: 5px;
  text-align: center;
  background-color: #f1f1f1;
}

<div id="mainHeader">
  <p align="center"> random header here </p>
</div>

<div id="mainPlace">
  <div id="mainTable">
    <table style='width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;border:1px solid black'>
      <tr id='tableheader'>
        <th class='tableheaders'>header 1</th>
        <th class='tableheaders'>header 2</th>
      </tr>

      <tr id='tablebody'>
        <td class='someCols'>
          <div class='innerstuffCols'>
            <div class='stuffbox' style='top:55px;'> stuff 1 </div>
            <div class='stuffbox' style='top:265px;'> stuff 2 </div>
            <div class='stuffbox' style='top:475px;'> stuff 3 </div>
            <div class='stuffbox' style='top:685px;'> stuff 4 </div>
            <div class='stuffbox' style='top:895px;'> stuff 5 </div>
            <div class='stuffbox' style='top:1105px;'> stuff 6 </div>
          </div>
        </td>
        <td class='someCols'>
          <div class='innerstuffCols'>
            some other stuff
          </div>
        </td>
      </tr>

    </table>

  </div>
  <div id="mainMenu">
    <p> some stuff here </p>
  </div>
</div>

在td内制作具有可定义绝对位置的div的可滚动div

1 个答案: