html - 使用 css 丢失元素的位置

Question

我需要这样做：

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

PS对不起，伙计们，小提琴工作花了一段时间。

所以它在这里

<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. 表确实具有该功能。查看演示（调整窗口大小以查看它的工作）

这可能不适用于 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位置，并使您的位置与您的宽度具有相同数量的像素。如下所示：relativeright divleftleft

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;
}

如果您希望您的 s 在页面上扩展，也可以将body高度设置为 100% ：div

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%; 
}