- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的页面设置有页眉部分、左侧边栏、内容和页 footer 分。在这里查看我的 jsfiddle:https://jsfiddle.net/maryjames0/3vxdzga6/ .
这是 HTML:
<div id="container">
<div id="header">
Some Header Content
</div>
<div id="main">
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat sodales neque, in varius est accumsan id. Ut nec fringilla purus, et sodales erat. Fusce pretium dapibus erat. Aenean ornare in felis quis commodo. Duis vulputate tellus sed faucibus aliquet. Suspendisse erat enim, laoreet sit amet enim sollicitudin, varius efficitur arcu. Maecenas molestie fringilla dolor, non pulvinar ante ullamcorper bibendum.</p>
<p>Curabitur quam magna, tempor in posuere vestibulum, porta at est. Fusce cursus leo vel arcu rhoncus dapibus. Fusce vel dictum lectus. Curabitur ligula elit, cursus ac lorem at, interdum fermentum arcu. Morbi eleifend tincidunt justo a tempor. Nulla quis egestas enim, vel iaculis nisi. Duis eros arcu, pulvinar aliquam ante eu, euismod commodo tellus. Phasellus egestas, nulla eu dictum finibus, eros massa aliquam massa, a volutpat sem urna ut purus. Duis egestas erat felis, sed scelerisque elit molestie tincidunt. Phasellus ac lorem ut dolor imperdiet varius. Quisque dapibus dui vitae urna pretium, a tincidunt urna sagittis. Vivamus quis accumsan ex. Mauris in ornare nisl, eu auctor mi. Mauris arcu risus, pharetra vel metus eu, feugiat tristique lectus. Aliquam erat volutpat. Vivamus ex lorem, pellentesque in pharetra ac, vulputate et massa.</p>
</div>
<div id="content">
<div id="top">
<p>Curabitur rhoncus quis diam quis tristique. Fusce aliquam lobortis elit. Duis dapibus maximus interdum. Praesent vitae mi venenatis, tincidunt enim ac, malesuada urna. Sed mollis massa at felis bibendum dapibus. Nunc vel sodales justo, at ultrices quam. Nullam in ornare sem. Praesent vestibulum interdum orci, in dignissim eros. Nunc lobortis, ligula id pellentesque sodales, sapien erat accumsan tellus, et finibus nunc eros auctor est. Integer sem odio, tincidunt sed purus sed, porta lacinia magna. Nulla sed sollicitudin risus. Aenean pulvinar maximus dui id luctus. Donec accumsan fermentum ante, ut gravida augue interdum ut. Quisque volutpat blandit luctus. Duis mollis eu odio gravida dictum. Nullam interdum tortor sit amet semper bibendum.</p>
</div>
<div id="bottom">
<p>Etiam euismod mattis sem pretium fringilla. Nunc lobortis ante diam, ac feugiat sem consectetur in. In non neque mattis, elementum ante ornare, blandit metus. Morbi eu sapien id elit sagittis commodo. Morbi sed velit eget dui vestibulum faucibus mattis vel lacus. Vestibulum a fringilla risus. Nulla convallis, lacus ut suscipit hendrerit, nisi lacus interdum neque, a commodo mauris diam in enim. Donec venenatis, nulla eu elementum ultrices, mi est vestibulum lectus, vel eleifend mi nisi quis lectus. Suspendisse commodo, risus id porttitor gravida, ex odio vulputate magna, eget elementum lectus mauris ac turpis. Nulla feugiat vestibulum viverra. Nullam vitae justo tristique purus tincidunt fermentum. Cras pretium purus elit, non interdum felis fermentum quis.</p>
</div>
</div>
</div>
<div id="footer">
Some Footer Content
</div>
</div>
还有 CSS:
#container {max-width: 1125px; margin-right: auto; margin-left: auto;}
#header {background-color: #c1d1dc;}
#main {overflow: hidden; padding: 0; margin: 0;}
#sidebar {float: left; display: inline; width: 305px; background-color: #d4d7d9; box-sizing: border-box; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 99999px; margin-bottom: -99999px;}
#content {padding-bottom: 99999px; margin-bottom: -99999px; overflow: hidden; background-color: pink;}
#top {padding: 0 15px 4px 15px; margin: 0 0 0 0; background-color: #FFFFFF; overflow: hidden;}
#bottom {background-color: #c1d1dc; overflow: hidden; padding: 0 15px 10px 15px; box-sizing: border-box;}
#footer {background-color: #8EA4B8;}
父 div (#content) 包含两个子 div(#top 和 #bottom)。所有这些 div 以及侧边栏 div (#sidebar) 的内容量都是可变的,因此它们的高度都是可变的。
我想知道的是,是否可以根据#content的(可变)高度减去#top的(可变)高度来计算#bottom的高度,以便#bottom填充剩余的高度#top 之后#content 中的空格。目标是让#bottom 及其背景颜色(以及它也将具有的边框)向下延伸至侧边栏。
注意:不幸的是我不能使用 Flexbox(需要为 IE8 和 IE9 设计)。
此处接受的答案:Pass variable into jQuery CSS value to calculate height与我想做的一致,但使用可变高度父 div 而不是 100% 或 100vh。
我也接受不使用计算的解决方案;什么都行。非常感谢!
最佳答案
在dom准备好后运行这样的东西
$(function() {
var maxHeight = Math.max($("#sidebar").height(), $("#content").height());
$("#bottom").height(maxHeight - $("#top").height());
});
关于javascript - 通过从父 div 中减去另一个子 div 的高度来计算子 div 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40296380/
我有两个列表,我想从 neg 中减去列表 pos 中元素的频率。所以: neg = [x for x in all[:800000]] pos = [x for x in all[800000:]]
我有两个列表,我想从 neg 中减去列表 pos 中元素的频率。所以: neg = [x for x in all[:800000]] pos = [x for x in all[800000:]]
我正在尝试减去 2 个标准逻辑向量并得到错误 p2 <= p1(11 downto 0)- idata(11 downto 0); Error (10327): VHDL error at sub.v
我将以下代码嵌入到类中。每当我运行 distToPoint 时,它都会给出错误“不支持的操作数类型 -: 'NoneType' 和 'float'” 我不知道为什么它会返回 NoneType 和如何让
这一直让我想知道, 假设我有这种情况: select (...long sub query..) - (...long sub query..) 我想把 - 放在条件中,这意味着有时它会是 - 有时是
我有两个 vector 。我需要从 vector1 中删除 vector2 中的内容。 [编辑:不清楚这是否意味着按照下面的链接或设置差异进行逐元素减法] 我使用 Visual Studio 2010
我有一张这样的 table : id product_property_id product_id amount type 1 1 145 10
我有两个 boolean 值列表 buy_machine 和 broken_machine。我想创建第三个列表 working_machines,它是购买的机器数量的总和并减去坏机器的数量。 我尝试了
我似乎可以解决这个问题。我有两个来自 sql 的访问者/国家/地区列表 us,us,uk,fr,uk,uk,uk 和 us,uk 我用 array_count_values() 将它们制成数组: Ar
我在 javascript 中减去时间时遇到了麻烦,尽管我已经谷歌搜索了 2 天但没有任何运气:( 我正在尝试为调查问卷计时。当用户开始调查问卷时,会记录时间戳。当用户完成/单击提交时,会记录新的时间
我正在尝试对 flex 搜索中索引的字段进行一些分析。 其中两个字段是“start_time”和“end_time”。我基本上希望将这两个字段的差异分组,即('end_time'-'start_tim
我有一个函数,它接收两个 BigDecimal 数字,即 bd1 和 bd2 作为参数。该函数应减去 bd1 - db2 并返回 bd1 和 bd2 的小数位数均为 2,结果的小数位数也应仅为 2但使
根据ldt_code中的ld源代码here。没有将dl_main传递给phdr的上下文,我对为什么通过减去虚拟地址来推断main_map的加载地址有些困惑。 我跟踪过的代码: 1124 static
我进行了多次重复测量的治疗,我想减去每次治疗的每个时间点的对照值。数据集的形状是这样的,有多年、物种和处理。 ID Year Species Treatment value 1 2010 x
我正在尝试查找一次旅行的矩形区域,可以在此处找到更多上下文 我在下面的代码中遇到的错误是: "Exception in thread "main" java.lang.ArrayIndexOutOfB
我一直在尝试使用 pandas dataframe 减去我读入 python 的列之间的日期和时间。我写的代码如下: Time = df['t'] - df['t'].shift(1) + df['t
I want to subtract all values in a[nn,...,0] by b[nn] while keeping the original structure of the ar
假设我有两个列表:List l1,和 Listl2 请帮助我如何在 2 个列表之间合并、减去和相交。谢谢。 注意:我使用的是 .NET 2.0,所以我不能使用 LINQ。谢谢。 最佳答案 以下是伪代码
这个问题不太可能对任何 future 的访客有帮助;它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关,通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用,visit the
我正在尝试运行以下代码: extern crate unicase; use unicase::UniCase; use std::collections::HashSet; fn main() {
我是一名优秀的程序员,十分优秀!