Question

我有以下代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style type="text/css">
    body {margin: 0; padding: 0}

    .left {
        background-color: yellow;
        width: 200px;
        height: 100%;
        position: fixed;
    }

    .right {
        background: green;
        height: 3000px;
        left: 200px;
        right: 0px;
        position: absolute;
    }
    </style>
</head>

<body>
    <div class="left">d</div>
    <div class="right">dafsdsfsdafkdasfjdslkfja;jdfsklsfdjaklfjdkafsjklsdjkfajklfdaksjlfjlsdsfjasdfkjldsa;fksdalfjdsafjdksa;lfjsdlfjaslfdjsafhdasjfhdsakjfhdsakjfjkadsflasfdfadfasfdasfdsfasfdasfdsaadfkljdsalfsafdsafdsaf</div>
</body>

其中呈现以下result。我应该如何调整右边的div来填充整个屏幕减去左边div的宽度，即200px？目前它溢出了屏幕宽度，我不知道为什么！

提前致谢。

Answer 1

问题是你输入了一个非空格字符串，因此导航器不知道如何在多行中显示它，你可以添加css word-wrap: break-word;来解决这个问题。

这是您的修改示例：

http://jsfiddle.net/q4kwy/3/

Answer 2

问题是你输入了一个非空格字符串，因此导航器不知道如何在多行中显示它，你可以添加css word-wrap: break-word;来解决这个问题。

这是您的修改示例：

http://jsfiddle.net/q4kwy/3/

Answer 3

我找到了一个优雅的解决方案，可以找到here

Div 100％宽度的容器减去nav div

3 个答案: