Expand a div to take the remaining width

2018-12-31 03:01发布

站内问答 / HTML/CSS
762 21 4

I want a two-column div layout, where each one can have variable width e.g.

div {
    float: left;
}
.second {
    background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

I want the 'view' div to expand to the whole width available after 'tree' div has filled needed space. Currently my 'view' div is resized to content it contains It will also be good if both divs take up whole height

Not duplicate disclaimer:

Expand div to max width when float:left is set because there the left one has a fixed width.

Help with div - make div fit the remaining width because I need two columns both aligned to left

21条回答
冷夜・残月
2楼-- · 2018-12-31 03:37

Here, this might help...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

查看更多
0人赞 添加讨论(0) 举报
公子世无双
3楼-- · 2018-12-31 03:38

A slightly different implementation,

Two div panels(content+extra), side by side, content panel expands if extra panel is not present.

jsfiddle: http://jsfiddle.net/qLTMf/1722/

查看更多
0人赞 添加讨论(0) 举报
泪湿衣
4楼-- · 2018-12-31 03:45

If both of the widths are variable length why don't you calculate the width with some scripting or server side?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)