【发布时间】：2017-01-03 06:14:40
【问题描述】：
我会尽快处理这个：
我有一个基本的 HTML 布局，由一个 2 列的表格组成，可以调整以适应窗口...左列用于显示网页的实际内容（因此它具有更大的宽度），右列用作侧边栏（宽度小于 200 像素）。我也有一个小页脚。问题是，当您以不同的屏幕分辨率测试网页时，所有元素似乎都安排得很好，但是当您到达“1200px”高度屏幕时，右侧边栏与页脚分开（它们一起）页脚调整只是无论分辨率如何，页面底部都很好，网页上的所有元素看起来都不错，但右侧边栏却不行。为什么会这样？如何使该单元格/列适应屏幕分辨率的高度？它似乎正在调整到左侧的列内容高度而不是屏幕的高度，为什么会这样？我该如何解决？
表格基本示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla ajustable al navegador y colunma fija de 200px</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow: auto;
}
#tabla {
width: 100%;
border-collapse: collapse;
border: 1px solid #444;
background-color: #ffc;
}
.celda_dcha {
width: 200px;
border: 1px solid #444;
background-color: #cfc;
}
</style>
</head>
<body>
<!-- los bordes y colores son para testar la maqueta -->
<!-- este esquema se adapta a cualquier resolución de pantalla, conservando la columna de la derecha siempre los 200px -->
<!-- probado en iexplorer 7 y 8, ff 3.6, opera 10 y safari 5 -->
<table id="tabla">
<tr>
<td>Contenido</td>
<td class="celda_dcha">Columna para imágenes</td>
</tr>
</table>
</body>
</html>
【问题讨论】：
-
现在使用表格进行布局被认为是不好的。使用您最喜欢的搜索引擎并寻找“基于 css 的列布局”。从长远来看，我认为这将使您受益。
-
谢谢，但这不是我要找的答案...实际上我尝试了 CSS 布局，但对我的提议不起作用：S 无论如何，感谢您的建议 :)
-
请发布（简化）版本的 html 代码，以便我们了解您是如何构建表格的
-
@KBoek：有代码，谢谢
-
@Jmlevick 谢谢！在您的代码中，我没有看到您所写的页脚...
标签： html html-table resolution