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

Answer 2

你可以试试这个：

.wrapper {
    width:900px;
    overflow: hidden;
}
.left{
    float: left;
    width: 300px;
    clear: both;
}
.right{
    overflow: hidden; /*prevent float wrapping*/
}

Answer 3

您应该能够使用以下样式达到您想要的效果：

.wrapper {overflow:auto; padding-left:300px; min-width:600px;}
.left {width:300px; float:left; margin-left:-300px; height:300px; background:red;}
.right {float:right; width:100%; height:300px; background:blue;}

Example

Answer 4

具有相当好支持的替代解决方案是使用display table / table-cell like here：

#wrapper {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width:300px;
    height:300px;
    background:red;
}
.right {
    display: table-cell;
    height:300px;
    background:blue;
}

如何使div完全响应

4 个答案: