0

我正在尝试完成 HTML/CSS 中的布局。目标是这样的： 布局

此布局中的某些元素具有非固定大小。左侧区域具有固定宽度，页脚具有固定（内容匹配）高度。左侧的列表应扩展其高度，页脚中的文本其宽度和画布两个维度，以便填充整个浏览器页面，但不会导致出现任何滚动条。哦，B代表按钮，但我猜这并不重要。

我已经看过一些示例（this）和参考资料（this）并试图从中学习，但我无法以我想要的方式得到它。我所做的更密切的尝试之一是：

<html><body style="margin: 0; padding: 0;">
<div style="position: absolute; background: #afa; top: 0px; bottom: 0px; left: 0; right: 0px;">
    <div style="position: absolute; background: #afa; top: 0px; bottom: 0px; left: 0; width: 240px;">
        <input style="width: 240px" id="selectedPosition"></input>
        <select style="position: relative; width: 240px; height: 100%;" id="points" multiple="multiple"></select>
        <div style="position: relative; background: #afa; left: 0; width: 240px;">
            <input style="width: 80px" type="button" value="Add"></input><!--
            --><input style="width: 80px" type="button" value="Up"></input><!--
            --><input style="width: 80px" type="button" value="Down"></input>
        </div>
    </div>
    <div>
        <div><input style="position: absolute; bottom: 0px; left: 0px; width: 100%"></input></div>
        <div><input style="position: absolute; bottom: 0px; right: 0px;" type="button" value="Button 4"></input></div>
    </div>
    <div style="position: absolute; background: #aaf; height: 100%; left: 240px;top: 0px;right: 0px; overflow: auto;"></div>
</div>
</body></html>

这里的问题是底部元素和右下角的按钮被尺寸扩展元素覆盖。我可能可以用固定的尺寸或边距来解决这个问题，但我想以“正确”的方式完成它。

另一种方法是使用跨行和跨列的 4x5 表，但我更加困惑，很快就放弃了。

我对 HTML/CSS 中的布局相当陌生，因此尽管有实际的解决方案，但在这件事上帮助我完成工作的任何“傻瓜”来源都值得赞赏。

更新

查看链接和 Fico 的答案后。但是，最接近的尝试是this。问题是当宽度/高度设置为 100% 时，列表和底部文本都与相应的按钮重叠（在 jsfiddle 示例中，我使用较低的数字进行演示）。作为旁注，给出的示例中的列表根本没有垂直延伸。使用我的本地文件时，它确实如此。

我看到的所有带有固定页脚和高度填充列的示例都为页脚使用了一些固定大小的高度，然后将其负面应用为边距，但我的页脚应该只是包装它的内容。有没有办法设置“延伸到下一个元素”的规则？

4

1 回答 1

1

首先对内容使用标记，对样式使用 css。你会工作得更干净，麻烦更少。包含这么多不是一个好习惯标签而不是使用外部 CSS（或最终嵌入到文档的 HEAD 中）

在我看来，你在这里需要这么多的绝对定位。

确定设计中的大区域（如下图） 在此处输入图像描述

第一印象是您在正常文档流中的一些元素的左侧宽度处有一个侧列，并且在其底部的三个按钮中浮动在一个 div 中

画布可以浮动在这个side 的左侧或右侧。

底部的文本和按钮可以集成在页脚中，按钮可以随意向右或向左浮动

灵活的解决方案易于检测。为您的画布使用一些 min 属性，并可能在旁边使用一些固定宽度。

于 2013-02-23T08:20:19.217 回答