关于html：展开div以获取剩余宽度


Expand a div to take the remaining width

我想要一个两列的DIV布局，其中每个都可以有可变的宽度，例如

1
2
3
4
5
6
div {
    float: left;
}
.second {
    background: #ccc;
}
1
2
Tree
View

号

我希望在"tree"div填满所需的空间后，"view"div扩展到可用的整个宽度。当前，我的"视图"分区已调整为其包含的内容如果两个跳水动作都能达到整个高度也会很好

不重复免责声明：

设置float:left时将div扩展为max width因为左边的宽度是固定的。

DIV帮助-使DIV适合剩余宽度因为我需要两列都左对齐

相关讨论

解决这个问题的方法其实很简单，但一点也不明显。您必须触发一个称为"块格式化上下文"(bfc)的东西，它以特定的方式与浮动进行交互。

取下第二个DIV，取下浮球，换成1[1]。任何非可见的溢出值都会使它所设置的块成为一个bfc。bfc不允许后代浮点数逃离它们，也不允许兄弟/祖先浮点数侵入它们。这里的净效果是浮动的DIV将执行它的操作，然后第二个DIV将是一个普通的块，占据除浮动所占宽度之外的所有可用宽度。

这应该适用于所有当前的浏览器，尽管您可能需要在IE6和7中触发hasLayout。我记不起来了。

演示：

  • 左固定：http://jsfiddle.net/a8zly/5/
  • 固定权利：http://jsfiddle.net/a8zly/2/
相关讨论

我刚刚发现了柔性盒子的魔力(显示：柔性)。试试这个：

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>

 Tree
 View

号

弹性盒子给了我15年来一直希望CSS拥有的控制。终于到了！更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

相关讨论

这将是一个很好的例子，说明一些与表无关的事情，而与CSS很难(如果不是不可能的话，至少在跨浏览器的意义上是这样)。

如果两列的宽度都是固定的，这就很容易了。

如果其中一个列的宽度是固定的，这将稍微困难一些，但完全可行。

两列的宽度都是可变的，imho您只需要使用两列表。

相关讨论

检查这个解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}
1
2
3
4
5
6
7
  width: 200px

 
    25%
    25%
    25%
    25%

。

相关讨论

在这里，这可能有助于…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>
 
    Tree
    View
   
 
</body>

</html>

。

相关讨论

使用calc：

1
2
3
4
5
6
7
8
9
10
.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

号

1
2
  a
  b

号

问题在于，所有宽度都必须明确定义，要么作为一个值(px和em可以工作)，要么作为某个明确定义的自身的百分比。

相关讨论

flexbox解决方案

1
2
3
4
5
6
7
8
9
10
html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}

号

1
2
  Tree
  View

号

注意：如果受支持的浏览器需要，请添加flex供应商前缀。

我不明白为什么人们愿意如此努力地为简单的柱状布局找到一个纯粹的CSS解决方案，而这种布局非常容易使用旧的TABLE标记。

所有浏览器仍具有表布局逻辑…也许可以叫我恐龙，但我说让它帮你。

1
2
3
4
5
6
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

。

跨浏览器兼容性方面的风险也要小得多。

相关讨论

你可以试试CSS网格布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}
1
2
3
4
5
6
<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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>
 
    Tree
    View
    View
   ">Tree
   
 
 
    Tree
    View
 

</body>

</html>

。

相关讨论

感谢您插入simpl.css！

记住要像这样用ColumnWrapper包装所有列。

1
2
    Tree
    View

我即将发布Simpl.css的1.0版，请帮助传播这个词！

稍微不同的实现，

两个DIV面板(内容+额外)，并排，如果不存在extra panel，则content panel将展开。

jfiddle：http://jsfiddle.net/qltmf/1722/

弹性增长-这定义了弹性项目在必要时增长的能力。它接受作为比例的无单位值。它指示该项目应占用的灵活容器内的可用空间量。

如果所有项目的flex grow设置为1，容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间将占用其他孩子两倍的空间(或者至少它会尝试)。在此处查看更多信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

。

1
2
3
4
      Left 50%
 
   
      Right 50%

如果另一列的宽度是固定的，那么如何使用适用于所有常见浏览器的calccss函数：

1
width: calc(100% - 20px) /* 20px being the first column's width */

号

这样，将计算第二行的宽度(即剩余宽度)并响应地应用。

帕特-你说得对。这就是为什么这个解决方案能同时满足"恐龙"和当代人的需求。：)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}
1
2
3
4
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
 
 
    This column as well as the entire container works like a table. Isn't Amazing!!!

。

相关讨论

我不确定这是否是您期望的答案，但为什么不将树的宽度设置为"自动"，将"视图"的宽度设置为100%？

相关讨论

我编写了一个javascript函数，该函数是从jquery$(document.ready()调用的。这将解析父DIV的所有子级，并且只更新最右边的子级。

HTML

1
2
3
4
5
6
7
8
...

Some text

Some other text


....

号

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each  that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this  that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left"))
                     + parseInt($(this).css("border-left-width"))
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right"))
                     + parseInt($(this).css("border-right-width"))
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) +"px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

号

您可以使用W3的CSS库，其中包含一个名为rest的类，该类只执行以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


 
    <p>
150px
</p>
 
 
    <p>
w3-rest
</p>

别忘了在页面的EDOCX1[1]中链接CSS库：

1
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

号

这是官方演示：W3学校的Tryit编辑

看看可用的CSS布局框架。我建议使用Simpl或者更复杂的蓝图框架。

如果您使用的是simpl(只需导入一个simpl.css文件)，则可以执行以下操作：

1
2
Tree
View

号

，对于50-50布局，或：

1
2
Tree
View

号

，对于25-75个。

就这么简单。

相关讨论

使用flexbox相当容易。请参见下面的代码片段。我添加了一个包装容器来控制流程并设置全局高度。添加了边框以标识元素。请注意，根据需要，div现在也扩展到全高。在现实场景中，供应商前缀应该用于flexbox，因为还没有完全支持它。

我开发了一个免费的工具来理解和设计使用flexbox的布局。在这里查看：http://algid.com/flex-designer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}
1
2
    Tree
    View

。

相关讨论

如果两个宽度都是可变长度的，那么为什么不使用脚本或服务器端计算宽度呢？

">Tree。

1
">View
相关讨论