将 min-width 设置为内容的宽度
Posted
技术标签:
【中文标题】将 min-width 设置为内容的宽度【英文标题】：Set min-width to width of contents 【发布时间】：2012-07-20 15:11:48 【问题描述】：我有一个带有背景的 div，其中包含一个表格。我希望 div 具有 100% 的宽度，除非它比表格的长度窄。我可以这样做：
.my-div
width:100%;
min-width:900px;
这对于 900 像素宽的表格来说非常好，但如果它比这窄，我将有不需要的滚动条，如果它比这宽，我将有无法访问的内容。显然，这可以用 javascript 轻松解决，但我想知道是否有纯 CSS 解决方案，所以我的应用程序不是那么 JS-heavy。
要查看正在发生的事情，请参阅here。我想要的是当表格中的文本溢出时，绿色背景会溢出视口。
【问题讨论】：
100% 宽度是否与视口宽度有关？ 我不知道那是什么意思。我希望.my-div 的宽度等于document.body.offsetWidth
视口是浏览器中显示网页的区域。 <body> 元素的宽度默认与视口的宽度相同。
所以DIV应该溢出视口？
是的，我希望 div 仅在其中的表格比视口宽时才溢出视口。直到运行时我才知道表格的宽度。
【参考方案1】：
怎么样...
.my-div
overflow: auto;
table
float: left;
现场演示： http://jsfiddle.net/WTwdN/4/
【讨论】：
这使.my-div 水平滚动。我希望滚动整个窗口。【参考方案2】：
如果我正确理解您的问题，这应该会有所帮助：
.my-div
/*width:100%;*/
height:400px;
background-color:#bada55;
display: inline-block; // this is the key
您的示例在此处修改：http://jsfiddle.net/nvLnodLh/
【讨论】：
【参考方案3】：我想要的是当表格中的文本溢出时，绿色背景会溢出视口。
您只需将一个表包装在一个表中，因此它们都会溢出。
.my-div
width:100%;
height:400px;
display: table;
background-color:#bada55;
td
white-space:nowrap;
table
width: 100%;
<div class="my-div">
<table>
<thead>
<tr><td>my table</td></tr>
</thead>
<tbody>
<tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>
</tbody>
</table>
</div>如果您不希望容器 div 变得比视口大，只需在桌子上设置背景即可。
.my-div
width:100%;
height:400px;
table
height: 100%;
width: 100%;
background-color:#bada55;
td
white-space:nowrap;
vertical-align: top;
<div class="my-div">
<table>
<thead>
<tr><td>my table</td></tr>
</thead>
<tbody>
<tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>
</tbody>
</table>
</div>【讨论】：
【参考方案4】：试试这个解决方案
.my-div
height:400px;
overflow: auto;
background-color:#bada55;
td
white-space:nowrap;
table
width: 100%;
<div class="my-div">
<table>
<thead>
<tr><td>my table</td>
<td>my table</td></tr>
</thead>
<tbody>
<tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>
</tbody>
</table>
</div>【讨论】：
【参考方案5】：CSS Intrinsic & Extrinsic Sizing Module Level 3
的草稿添加了 width: fit-content，这正是您想要的。 IE/Edge 不支持它。
【讨论】：
以上是关于将 min-width 设置为内容的宽度的主要内容，如果未能解决你的问题，请参考以下文章
css如何设置最小宽度是屏幕宽度 => style="min-width: 屏幕宽度">