Question

我需要我的桌子尽可能宽，即使它的内容是绝对的，比整页更宽。因此，当我缩放和顶部模式div变得更宽时，表将扩展其单元格。感谢。

.topToolbar,.botToolbar{
	background-color: red;
	height:100%;
}

.leftToolbar,.rightToolbar{
	background-color: blue;
	width:100%;
	height:100%;;
}
.mdi{
	position:relative;
	overflow:auto;
	width:100%;
	height:100%;
	background-color: grey;
}
.schema{
	border:10px solid green;
	position:absolute;
	top:300px;
	left:300px;
	width:600px;
	height:300px;
	background-color:white;
}
.schemaBot, .schemaTop{
	border:10px solid green;
	top:0px;
    position:absolute;
	left:600px;
	width:600px;
	height:30px;
	background-color:white;
}
.schemaLeft, .schemaRight{
	border:10px solid green;
	position:absolute;
	top:300px;
	left:0;
	width:30px;
	height:300px;
	background-color:white;
}
.tbl tr:first-child td,.tbl  tr:last-child td{
	position:relative;
	height:50px;
}
.tbl tr:nth-child(2)  td:first-child,.tbl  tr:nth-child(2)  td:last-child{
	position:relative;
	width:50px;
	height:100%;
}

.tbl tr:nth-child(2)  td:nth-child(2){
		
	
	}
.tbl{
	border-spacing:0px;
	min-width:100%;
	height:100%;
}
td{
	padding:0px;
}

html, body{
	height:100%;
	margin:0px;
}

<!DOCTYPE html>

	<body>
	<table class="tbl">
		<tr>
			<td colspan=3>
				<div class="topToolbar">
					<div class="schemaTop"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="leftToolbar">
					
				</div>
			</td>
			<td>
				<div class="mdi">
					<div class="schema"></div>
				</div>
			</td>
			<td>
				<div class="rightToolbar">
					
				</div>
			</td>
		</tr>
		<tr>
			<td colspan=3>
				<div class="botToolbar">
					<div class="schemaBot"></div>
				</div>
			</td>
		</tr>
	</table>
	
	</body>

Answer 1

将schemaTop类设置为宽度100％。

   .schemaBot, .schemaTop{
      border: 10px solid green;
      top: 0px;
      position: absolute;
      height: 30px;
      background-color: white;
      width: 100%;
    }

试试这个

 .schemaBot, .schemaTop{
          border: 10px solid green;
         top: 0px;
         position: absolute;
         left: 36%;
         width: 36%;
         height: 30px;
         background-color: white;
   }

Answer 2

我发现div不可能保持绝对内容，absoulte内容总是会溢出并且不会影响父div大小

具有绝对内容的表格单元格的宽度

2 个答案: