HTML中左边固定大小，右边自适应，右边的区域在内容过长时出现水平滚动条

admin · 发表于 2024-9-2 21:19:35

HTML中左边固定大小，右边自适应，右边的区域在内容过长时出现水平滚动条
为了使右边的区域在内容过长时出现水平滚动条，可以通过设置 `overflow-x` 属性来实现。以下是修改后的代码示例，当表格的宽度超出右侧区域时，会出现水平滚动条。
### 示例代码

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定大小和自适应布局</title>
<style>
body {
display: flex; /* 使用flex布局 */
margin: 0; /* 去掉默认边距 */
height: 100vh; /* 设置高度为视口高度 */
}
.left {
width: 200px; /* 左边固定宽度 */
background-color: #f0f0f0; /* 左边背景颜色 */
padding: 10px; /* 内边距 */
box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* 添加阴影 */
}
.right {
flex-grow: 1; /* 右边自适应 */
padding: 10px; /* 内边距 */
overflow: auto; /* 超出部分显示滚动条 */
}
.table-container {
max-height: 400px; /* 设置最大高度 */
overflow-y: auto; /* 垂直方向显示滚动条 */
overflow-x: auto; /* 水平方向显示滚动条 */
}
table {
width: 1000px; /* 设置表格宽度为固定值以演示水平滚动条 */
border-collapse: collapse; /* 合并边框 */
}
th, td {
border: 1px solid #ccc; /* 单元格边框 */
padding: 8px; /* 单元格内边距 */
text-align: left; /* 左对齐 */
}
th {
background-color: #f2f2f2; /* 表头背景颜色 */
}
</style>
</head>
<body>
<div class="left">
<h2>左侧固定区域</h2>
<p>这里是左侧的内容。</p>
</div>
<div class="right">
<h2>右侧自适应区域</h2>
<div class="table-container">
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>项目A</td>
<td>这是项目A的描述。</td>
</tr>
<tr>
<td>2</td>
<td>项目B</td>
<td>这是项目B的描述。</td>
</tr>
<tr>
<td>3</td>
<td>项目C</td>
<td>这是项目C的描述。</td>
</tr>
<tr>
<td>4</td>
<td>项目D</td>
<td>这是项目D的描述。</td>
</tr>
<tr>
<td>5</td>
<td>项目E</td>
<td>这是项目E的描述。</td>
</tr>
<tr>
<td>6</td>
<td>项目F</td>
<td>这是项目F的描述。</td>
</tr>
<tr>
<td>7</td>
<td>项目G</td>
<td>这是项目G的描述。</td>
</tr>
<tr>
<td>8</td>
<td>项目H</td>
<td>这是项目H的描述。</td>
</tr>
<tr>
<td>9</td>
<td>项目I</td>
<td>这是项目I的描述。</td>
</tr>
<tr>
<td>10</td>
<td>项目J</td>
<td>这是项目J的描述。</td>
</tr>
<tr>
<td>11</td>
<td>项目K</td>
<td>这是项目K的描述。</td>
</tr>
<tr>
<td>12</td>
<td>项目L</td>
<td>这是项目L的描述。</td>
</tr>
<tr>
<td>13</td>
<td>项目M</td>
<td>这是项目M的描述。</td>
</tr>
<tr>
<td>14</td>
<td>项目N</td>
<td>这是项目N的描述。</td>
</tr>
<tr>
<td>15</td>
<td>项目O</td>
<td>这是项目O的描述。</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

复制代码

### 代码说明
1. **布局**：
- 左侧区域宽度固定为 200px，右侧区域使用  `flex-grow: 1`  使其自适应剩余空间。
2. **表格**：
- 表格的宽度设置为固定值（1000px），以便在内容超出右侧区域时显示水平滚动条。
- 在右侧区域中，表格被放置在一个最大高度为 400px 的  `div`  中，并允许垂直和水平滚动。
3. **样式**：
- 为左侧和右侧区域添加了一些基本的样式，例如背景色、内边距和边框样式。
你可以将上述代码复制到一个  `.html`  文件中，然后在浏览器中打开，查看效果。

		自动登录	找回密码
密码			立即注册

HTML中左边固定大小，右边自适应，右边的区域在内容过长时出现水平滚动条

相关帖子