Question

我有一个简单的聊天系统页面。测试页面可以在这里找到：http://komasurfer.com/chat-test/

以下是代码：

<html>
<head>
<style type="text/css">
#page-wrap {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;

  /*for sidebar*/
  margin-right: -110px;
  background-color: #AAAAFF;
}

#chat-wrap {
  border: 1px solid #eee;
  margin: 0 5px 10px 0;
  float: left;

  /*margin for sidebar*/
    margin-right:115px;

  border: 1px solid red;
  background-color: #600000; }

#chat-area {

  width:100%;
  height: 400px;
  border: 1px solid #666;
  float: left;
}

#sidebar {
  border: 1px solid green;
  float: right;
  width: 110px;
  padding: 0px 0px 0px 5px;
}

#entry {
  background-color: #ffffff;
  padding: 5px;
  font-size: 1em;
  clear: both;
  border: 3px solid #999;
  height: 40px;
  width: 97%; }
#entry-btn {
  padding: 18px;
  float: right; }

.left {float: left; }
.right {float: right; }
.c {clear: both; }
</style>

</head>
<body>

<div id="page-wrap">

    <div id="sidebar">
            SIDEBAR
    </div>

    <div id="chat-wrap">

        <div id="chat-area">

            <div id="loading">connecting to server...</div>

        </div>

    </div>

    <div class="c"></div>

    <form id="send-message-area">
        <div>
            <table border="0" width="100%" cellpadding="0" cellspacing="0">
            <tbody><tr><td align="left" width="98%" style="padding-right:5px;">
                <textarea tabindex="1" maxlength="2000" id="entry"></textarea>
            </td><td align="right">
                <input id="entry-btn" type="button" value="Send">
            </td></tr></tbody></table>
        </div>
    </form>

</div>

</body>
</html>

我已经尝试了很长时间才能将红色框（包含聊天内容）扩展到侧边栏。如果我向该框添加100％的宽度，它总是忽略我为侧边栏设置的边距并扩展到容器框的宽度。

如何将红色聊天区域扩展到侧边栏（减去5像素的安全边距）？

布局是浮动布局，因此无法使用绝对测量。侧边栏应为110像素。

Answer 1

从chat-wrap中删除float：left并增加右边距：

#chat-wrap {
    background-color: #600000;
    border: 1px solid red;
    margin: 0 136px 10px 0;
}

边栏和容器宽度CSS问题

1 个答案: