javascript - Fill horizontal space

Question

I want the green area here to fill the entire horizontal white area between the green and the blue area. The problem is that I don't know what I should put on it's width attribute, currently it is 500px.

<article id="chat">
</article>
<aside id="channel-attendees">
</aside>

chat is the left bar, channel-attendees the right one.

#chat {
    background: green;
    float: left;
    height: 500px;
    width: 500px;
}

#channel-attendees {
    background: blue;
    float: right;
    width: 200px;
    height: 500px;
}

score 1 · Accepted Answer

将绿色宽度更改为 90%，将蓝色宽度更改为向左浮动 10%，这应该适用于所有类型的显示器；）

#chat {
    background: none repeat scroll 0 0 green;
    float: left;
    height: 500px;
    width: 90%;
}


#channel-attendees {
    background: none repeat scroll 0 0 blue;
    float: left;
    height: 500px;
    width: 10%;
}

score 1 · Accepted Answer

如果您希望绿色区域是灵活的和具有固定宽度的蓝色区域，您只需要从绿色块中删除浮动和宽度，您还需要将 margin-right 添加到值 = 蓝色块宽度的绿色块中。

#chat {
background: green;  
height: 500px;   
margin-right: 200px;
}

并将蓝色块放在绿色之前。

 <body>
  <header>
    <a href="#"><img src="img/icon256.png"></a>
        <div id="menu">
            <div id="user">
                <img id="user-avatar" src="img/avatar.jpg">
                <span id="user-name">Michael</span>
            </div>
        </div>
    </header>
    <div id="channels">
    </div>
    <aside id="channel-attendees">
    </aside><article id="chat">
    </article> 
</body>

score 0 · Accepted Answer

而不是使用width试试这个：

#chat {
  background: green;
  float: left;
  height: 500px;
  position: absolute;
  right: 200px;
  left: 0;
}

javascript - Fill horizontal space

3 回答 3

Related

Reference