CSS/HTML 中没有可见宽度的侧边栏

Posted 2023-03-06

【中文标题】CSS/HTML 中没有可见宽度的侧边栏

【英文标题】：side bar with a no previsible width in CSS/HTML

【发布时间】：2016-10-13 03:45:26

【问题描述】：

有没有办法在 css/html 中实现以下行为：

请注意，绿色侧边栏不是响应式的，但我不能给它一个固定的宽度

width: XX px;

因为它可以包含更多或更少的元素，所以事先不知道XX。

棕色条必须具有响应性，并占据所有剩余宽度。

提前感谢您的任何技巧！我已经尝试过表格，但没有成功，因为我们无法指定一个 div 来将其限制在必要的范围内。

【问题讨论】：

我建议你忘记棕色条，而只使用父背景颜色。因此，构造将是父级和一个子级绿色条，您将在其中指定您的尺寸，棕色部分将可见父级 bg 颜色

您需要支持哪些浏览器？

如果您需要支持，请使用display: table 发布答案

【参考方案1】：

您可以使用 flexbox 轻松实现。这是示例： http://codepen.io/anon/pen/JKXXNE

#container 
  display:flex;

#sidebar, #content 
  height: 100px;

#sidebar 
  background-color: green; 

#content 
  background-color: brown;
  flex: 1;

【讨论】：

很好的解决方案，正是我想要的

【参考方案2】：

您可以使用Flexbox，如果您将flex: 1 设置在右侧div 上，它将占用剩余的可用空间，左侧div 的宽度仍然是动态的。

.parent 
  display: flex;
  border: 2px solid black;

.left 
  background: #22B14C;
  padding: 10px;

.right 
  background: #EFE4B0;
  padding: 10px;
  flex: 1;

span 
  margin: 0 20px;

<div class="parent">
  <div class="left"><span>Span</span><span>Span</span></div>
  <div class="right">Right</div>
</div>

这也可以通过 CSS 表格布局来完成，您只需在 .right div 上设置 width: 100%，它将占用剩余的可用空间

.parent 
  display: table;
  border: 2px solid black;

.left 
  background: #22B14C;
  display: table-cell;
  padding: 10px;

.right 
  background: #EFE4B0;
  display: table-cell;
  width: 100%;
  padding: 10px;

span 
  margin: 0 20px;

<div class="parent">
  <div class="left"><span>Span</span><span>Span</span></div>
  <div class="right">Right</div>
</div>

【参考方案3】：

对于旧版浏览器，请使用display: table

html, body
  height: 100%;
  margin: 0;

.tbl
  display:table;

.row
  display:table-row;

.cell
  display:table-cell;

.content
  width: 100%;

#left_col 
  background: orange none repeat scroll 0 0;
  width: 1%;

#right_col 
  background: green none repeat scroll 0 0;
  width: 100%;

<div class="tbl content">
  <div class="row">
    <div id="left_col" class="cell">
      wide&nbsp;content&nbsp;<br>
      content&nbsp;<br>
      wider&nbsp;contentcontent&nbsp;<br>
    </div>
    <div id="right_col" class="cell"></div>
  </div>
</div>

【讨论】：

不错的后备，我认为 1% 的宽度是我自己尝试中缺少的

【参考方案4】：

另一种不使用 flexbox 的方法是：

工作小提琴：

https://jsfiddle.net/y00e5w6m/ （请注意，我使用示例 css 和输入只是为了展示如何做到这一点。这应该根据要求进行一些调整）

样本输出：

HTML：

<div style="float:left;width:100%;border:1px solid #000;">
<div id="dynamic-content" style="float:left;background-color:#090;border:1px solid #900">
<div style="float;left;">
Mango
</div>
<div style="float;left;margin-left:5px;">
Banana
</div>
<div style="float;left;margin-left:5px">
Orange
</div>
</div>
<div id="other-content" style="float:left;background-color:#630;border:1px solid #009;">
</div>
</div>

JS：

var items=["mango","grapes","banana"];
var windowWidth = $(window).width();
console.log(windowWidth);
var dynamicContentWidth = $("#dynamic-content").width();
console.log(dynamicContentWidth);
var otherContentWidth = dynamicContentWidth >= windowWidth ? windowWidth : windowWidth-dynamicContentWidth-20;

console.log(otherContentWidth);

$("#other-content").width(otherContentWidth);
$("#other-content").height($("#dynamic-content").height());

【讨论】：

谢谢，Firefox 好像有问题，当我调整浏览器大小时，棕色容器发送到绿色容器下方

当你的左栏的大小超过窗口大小以提供对页面的响应时，这是故意完成的像素边界或一些额外的空间，因为它可能会被破坏。你可以肯定地调整它

我使用的逻辑是保持左侧栏的宽度动态，右侧根据左侧和窗口的大小进行调整。