我只需要帮助使元素适应 div 的剩余空间,该空间由固定位置元素覆盖。 过度简化:我有一个左固定菜单,它占总宽度的 25% 但有一个限制:最大宽度:350 像素和最小宽度:280 像素。 我还有一个居中对齐的 div,其宽度为 80%。 我想将内容放在第二个 div 中,在 div 接触点和左边距之间。 我已经尝试在 div 开始和菜单结束之间放置一个间距 div,(内容占据剩余空间),但我得出的结论是,由于最小值和最大值,不可能用 css 进行这些计算宽度。 (如果我改变屏幕分辨率,宽度可能会改变,也可能不会)。
我该如何解决这个问题? 它的 javascript 是个好主意吗?
最佳答案
我想要么this fiddle或 this fiddle可能会得到你想要的。在任何一种情况下,我都使用伪元素生成一个 float
来分隔它。
#container:before {
content: '';
display: block;
float:left;
margin-left: -12.5%; /* push float to left edge based on 80% container width */
width: 31.25%; /* make float 25% of total width based off its 80% container */
max-width: 350px;
min-width: 280px;
height:100%; /* or 90% in first fiddle */
}
如果您希望它始终保持正确,第二个 fiddle 还在 #content
上设置了 overflow: hidden
。两者还需要在 body
和 html
标签上设置 height: 100%
。
关于javascript - 计算元素的剩余宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11582753/