更新

Question

我正在尝试在HTML / CSS中完成布局。目标是这样的： layout http://s16.postimage.org/f7i5gtfb9/layout.png

此布局中的某些元素具有非固定大小。左侧区域具有固定宽度，页脚具有固定（内容匹配）高度。左侧的列表应扩展它的高度，页脚中的文本宽度和画布两个尺寸，以便填充整个浏览器页面，但不会导致出现任何滚动条。哦，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示例中，我使用较低的数字进行演示）。作为旁注，给出的示例中的列表根本不垂直延伸。使用我的本地文件时，它会。

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

Answer 1

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

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

确定您设计中的重要区域（如下图所示） enter image description here

第一印象是你在左边宽度上有一个旁边列，在普通文档流中有一些元素，在底部有三个按钮漂浮在div中

画布可以左侧或右侧浮动放置旁边和画布都包含在 mainContainer div。

中

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

灵活的解决方案易于检测。对画布使用一些min属性，可能还有一些固定宽度。

具有空间填充元素的组合HTML布局

更新

1 个答案: