jquery - 如何使 div 完全响应

Question

我有 HTML 和 CSS，比如:

<div class='wrapper'>
    <div class='left'>left content</div>
    <div class='right'>right content</div>
</div>

现在，我按像素固定左边的宽度。如何使 right 的宽度响应式(使其完全响应式)

CSS:

@media screen and (min-width:600px)
{
    .wrapper {width:900px}
    .left  {width:300px}
    .right {width: ? }
}

我必须只使用 CSS 还是 Jquery 来做到这一点？感谢您的帮助。

Answer 1

您可以像这样使用 css3 calc() 函数:

@media screen and (min-width:600px)
{
    .wrapper {width:900px}
    .left  {width:300px}
    .right {width: calc(100% - 300px) }
}

在使用之前:see this: Can I use calc() css