个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在尝试使用 HTML/CSS 完成布局。目标是这样的: 
此布局中的某些元素具有非固定大小。左侧区域具有固定宽度，页脚具有固定(内容匹配)高度。左边的列表应该扩展它的高度，页脚中的文本它的宽度和 Canvas 的两个尺寸，这样整个浏览器页面都会被填满，但不会导致任何滚动条出现。哦，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 示例中，为了演示目的，我使用了较低的数字)。作为旁注，给定示例中的列表根本没有垂直延伸。当使用我的本地文件时，它确实如此。
我看到的所有使用固定页脚和高度填充列的示例都为页脚使用了一些固定大小的高度，然后将其作为边距负应用，但我的页脚应该只是包裹它的内容。有没有办法设置一个规则“一直延伸到下一个元素”？
最佳答案
首先对内容使用标记，对样式使用 CSS。你会工作得更干净，麻烦更少。包含这么多 标签而不是使用外部 CSS(或最终嵌入到文档的 HEAD 中)并不是一个好习惯
我看不像，你这里需要这么多的绝对定位
确定你设计中的大区域(如下图) 
第一印象是你有一个 aside 列，在正常文档流中的一些元素的左侧宽度和它底部的三个按钮 float 在 div 中
Canvas 可以在这个旁边的左边或右边 float aside 和 canvas 都包含在 mainContainer div 中。
底部的文本和按钮可以集成在页脚中，按钮可以随意向右或向左浮动
灵活的解决方案易于检测。为您的 Canvas 使用一些 min with 属性，并可能在旁边使用一些固定宽度。
关于html - 具有空间填充元素的组合 HTML 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15038233/
24
4
0
我有一个 mysql 表，其中包含一些随机数字组合。为简单起见，以下表为例: index|n1|n2|n3 1 1 2 3 2 4 10 32 3 3 10 4 4
我有以下代码: SELECT sdd.sd_doc_classification, sdd.sd_title, sdd.sd_desc, sdr.sd_upl
如果我有两个要合并的数据框 Date RollingSTD 01/06/2012 0.16 01/07/2012 0.18 01/08/2012 0.17 01/09/20
我知道可以使用 lein ring war 创建一个 war 文件，但它似乎仍然包含码头依赖项。当我构建 war (并在 tomcat 上部署)时，有没有办法排除码头依赖项？ 如果我根本不能做这件事，
维基百科关于封装的文章指出: “封装还通过防止用户将组件的内部数据设置为无效或不一致的状态来保护组件的完整性” 我在一个论坛上开始讨论封装，在那里我问你是否应该始终在 setter 和/或 gette
对于我使用的组合框内的复选框: AOEDComboAssociationName = new Ext.form.ComboBox({ id: 'AOEDComboAssociationName',
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How do I combine LINQ expressions into one? public boo
如何在 rust 中找到排列或组合的数量？ 例如C(10,6) = 210 我在标准库中找不到这个函数，也找不到那里的阶乘运算符(这就足够了)。 最佳答案 以@vallentin 的回答为基础，可以进
我有一个复杂的泛型类型用例，已在下面进行了简化 trait A class AB extends A{ val v = 10 } trait X[T<:A]{ def request: T }
如何使用 Hibernate 限制来实现此目的？ (((A='X') and (B in('X',Y))) or ((A='Y') and (B='Z'))) 最佳答案 思考有效 Criteria c
我一定会在我的一个项目中使用谷歌图表。我需要的是，显示一个条形图，并且在条形图中，与每个条形相交的线代表另一个值。如果您查看下面的 jsfiddle，您会发现折线图仅与中间的条形图相交，并继续向其他条
只是一个简单的问题，我也很想得到答案，因为我不能百分百理解 Javascript 示例:假设您提示用户输入名称。够简单吧？但是你有一个数组，上面写着一些名字(其中之一就是)，基本上就是我到目前为止所说
我试图通过 Haskell 理解函数式编程，但在处理函数组合时遇到了很多麻烦。 其实我有这两个功能: add:: Integer -> Integer -> Integer add x y = x
我正在寻找一种在 Realm 查询中组合 AND 和 OR 的方法。 这是我的课: class Event extends RealmObject { String id; String
例如，我有一个包含 5 个元素的哈希: my_hash = {a: 'qwe', b: 'zcx', c: 'dss', d: 'ccc', e: 'www' } 我的目标是每次循环哈希时都返回，但没
我是Combine 的新手，我想得到一个看似简单的东西。假设我有一个整数集合，例如: let myCollection = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 我想以例如 0
关于“优先组合而不是继承”的问题，我的老师是这样说的: 组合:现有类成为新类的组件 转发:新类中的每个实例方法，在现有类的包含实例上调用相应的方法并返回结果 包装器:新类封装了现有的 这三个概念我不是
我正在尝试将单个整数从 ASCII 值转换为 0 和 1。相关代码如下所示: int num1 = bin.charAt(0); int num2 = bin.charAt(1);
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 7 年前。 我经常看到“嵌套”类中的非静态变
我尝试合并两个数据集(DataFrame)，如下所示: D1 = pd.DataFrame({'Village':['Ampil','Ampil','Ampil','Bachey','Bachey',
我是一名优秀的程序员,十分优秀！