html - css填充剩余宽度




展开div来获取剩余宽度 (13)

我想要一个双列div布局,其中每个布局都可以具有可变宽度,例如

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

我希望'view'div扩展到'tree'div填充需要的空间后可用的整个宽度。 目前我的'view'div被调整为它包含的内容。如果两个div都占据整个高度,它也会很好

不重复免责声明:

当float:left被设置时,将div扩展到最大宽度,因为左边的宽度是固定的。

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


Flexbox解决方案

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}
<div class="wrapper">
  <div style="background: #fc9;">Tree</div>
  <div class="second" style="background: #ccc;">View</div>
</div>

注意:如果支持的浏览器需要,请添加灵活的供应商前缀。


你可以使用包含' rest '类的W3.CSS库:

<!DOCTYPE html>
 <html>
   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   <body>
    <div class="w3-row">
      <div class="w3-col " style="width:150px"><p>150px</p></div>
      <div class="w3-rest w3-green"><p>w3-rest</p></div>
    </div>
   </body>
 </html>

不要忘记在html页面的标题中链接W3的css库:

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

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_rest&stacked=h


在这里,这可能有帮助...

<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>


如果两个宽度都是可变长度,为什么不用一些脚本或服务器端来计算宽度?

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

<div style="width: <=% getViewWidth() %>">View</div>

帕特 - 你是对的。 这就是为什么这个解决方案能够同时满足“恐龙”和同时代人。 :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
  <style type="text/css">
    .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%;
    }
    .txtCont .ip {
      width: 100%;
      max-width: 100%;
      min-width: 30%
    }
  </style>
</head>

<body>
  <div class="btnCont">
    <div class="txtCont">Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!</div>
    <div class="subCont">This column as well as the entire container works like a table. Isn't Amazing!!!</div>
  </div>
</body>

</html>


您可以尝试CSS网格布局

dl {
  display: grid;
  grid-auto-columns: max-content auto;
}

dt {
  grid-column: 1;
}

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


我不明白为什么人们愿意努力寻找简单的柱状布局的纯CSS解决方案,使用旧的TABLE标签很容易。

所有浏览器仍然具有表格布局逻辑......或许叫我恐龙,但我说让它帮助你。

<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>

就跨浏览器兼容性而言,风险也小得多。


我写了一个javascript函数,我从jQuery $(document).ready()调用。 这将解析父分区的所有孩子,并只更新最正确的孩子。

HTML

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

JavaScript的

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> 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"));
            }
        });
    });
}

林不知道这是你期待的答案,但是,为什么不把树的宽度设置为'自动'和'视图'的宽度为100%?


检查此解决方案

.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;
}
<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>



解决这个问题其实很简单,但并不明显。 你必须触发一个被称为“块格式化上下文”(BFC)的东西,它以特定的方式与浮点数进行交互。

只需要第二个div,删除浮动,并给它overflow:hidden 。 除可见性以外的任何溢出值都会使其设置的块成为BFC。 BFC不允许后代浮游物逃离它们,也不允许兄弟/祖先浮游物闯入它们。 这里的净效果是浮动的div会做的事情,然后第二个div将是一个普通的块,占用所有可用的宽度, 除了浮动所占用的宽度。

这应该适用于所有当前的浏览器,尽管您可能必须在IE6和7中触发hasLayout。我不记得了。

演示:


<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="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>





multiple-columns