Question

我需要像这样做： enter image description here

左框应具有静态宽度，右框应调整为完整浏览器宽度。盒子的高度也应该可以调整。

P.S。对不起，伙计们需要一段时间来制作小提琴。

<div class="page-wrapper">
    <div class="search-wrapper">
    </div>
    <div class="content-wrapper">
        <div class="leftPage">
        </div>
        <div class="rightPage">
        </div>
    </div>
</div>

问题是：

我有银左页。我希望它有静态宽度。让我们说454px。我希望将右页（黑色）动态调整大小到屏幕。

宽度为20％/ 80％的变体对我不利。是否可以只使用CSS？我用jquery / js得到了很好的答案，但如果只能用CSS完成它仍然很有趣）

对不起麻烦）

Answer 1

<强>使用Javascript / jQuery的

如果您希望左列是静态的而右列是动态的，则需要Javascript或像SASS一样的CSS预处理器。这是旧浏览器支持的唯一真正的解决方案。

// parent width - leftpage width = remainings
$('div.rightPage').width(
    $('div.rightPage').parent().width() - $('div.leftPage').width()
);

流体布局

如果您真的想要一个纯CSS解决方案，我建议使用流畅的布局。这也是跨浏览器。

div.leftPage { width: 25%; }
div.rightPage { width: 75%; }

模拟表

作为替代方案，您仍然可以使用display: table模拟表格布局。表具有该功能。 Check out the demo（调整窗口大小以使其正常工作）

这在IE6和IE7中可能无效。

原生表

最后，如果您对表没问题，可以使用跨浏览器的本机表;）

CSS

table td.fixed { width: 200px; }

HTML

<table>
    <tbody>
        <tr>
            <td class="fixed">
                <p>Left content</p>
            </td><td>
                <p>Right content</p>
            </td>
        </tr>
    </tbody>
</table>

最后，为了垂直调整大小，您需要设置resize: vertical。

div.leftpage, div.rightpage { resize: vertical; }

Answer 2

使用表格要容易得多。

<强> HTML

<div class="page-wrapper">
    <div class="search-wrapper">
    </div>
    <table class="content-wrapper">
      <tr>
        <td class="leftPage">LEFT</td>
        <td class="rightPage">RIGHT</td>
       </tr>
    </table>
</div>

<强> CSS

table
{
  width:100%;
}
.leftPage
{
width: 454px;
}

除非你真的想坚持使用DIV？

Answer 3

尝试在absolute容器上使用relative位置，并使right div位置left与left的像素数相同宽度。如下所示：

div.content-wrapper {
    height: 100%;
    width: 100%;
    position:relative;
}
div.leftPage {
    background-color: black;
    height: 100%;
    width: 454px;
    position:absolute;
}
div.rightPage {
    background-color: red;
    height: 100%;
    width: 100%;
    position:absolute;
    left:454px;
}

如果您希望body在页面中展开，也可以将div高度设置为100％：

body, html {
    width:100%;
    height:100%;
}

以下是演示：http://jsfiddle.net/XLLSA/1/

修改

我修复了搜索div：http://jsfiddle.net/XLLSA/2/

Answer 4

试试这个..

div.left { 
    width: 20%;
    min-width: 200px;
}
div.right { 
    width: 80%; 
}

用css丢失元素的位置

4 个答案: