让 div 占据剩余宽度的 100%？ [复制]
Posted
技术标签:
【中文标题】让 div 占据剩余宽度的 100%？ [复制]【英文标题】：Make div occupy 100% of the remaining width? [duplicate] 【发布时间】：2019-03-18 11:20:55 【问题描述】：如何让#content 坐在#menu 旁边，同时占据#container 的其余宽度；
<div id="container">
<div id="menu">
</div>
<div id="content">
</div>
</div>
注意：我需要#menu 有固定的 200px 宽度
https://jsfiddle.net/h5z8yowL/1/
【问题讨论】：
【参考方案1】：你可以使用 flex:
#container
display: flex;
width: 100%;
#menu
width: 200px;
background: red;
#content
flex: 1;
background: yellow;
<div id="container">
<div id="menu">
foo
</div>
<div id="content">
foo
</div>
</div>或网格布局
#container
display: inline-grid;
grid-template-columns: 200px auto;
width: 100%;
#menu background: red;
#content background: yellow; <div id="container">
<div id="menu">
foo
</div>
<div id="content">
foo
</div>
</div>【讨论】：
【参考方案2】：您可以在 css 中使用 calc() 函数。
#container width:100%;
#menu background:red; float:left; width:200px;
#content background:yellow; float:left; width:calc(100% - 200px) <div id="container">
<div id="menu">
foo
</div>
<div id="content">
foo
</div>
</div>【讨论】：
【参考方案3】：您可以将 CSS 添加到两个 div 中，即 float 属性。
#menu
float: left;
width: 200px;
#context
float: right;
【讨论】：
【参考方案4】：我不确定我是否理解你的意思： 您希望 div #menu 的大小精确到 200 像素，不管里面是什么？解决方案： 您需要在 css 中执行此操作： 主要有 3 种不同的类型，包括 css
1.在 body 标签内：（用于看起来完全不同的小型网站，大多数程序员讨厌这样做）
<div id="container">
<div id="menu" style="width: 200px;">
</div>
<div id="content">
</div>
</div>
2.在head标签内：（用于外观相同的小型网站，大多数程序员对小型网站这样做）
<head>
<style>
.menu
width:200px;
</style>
</head>
<body>
<div id="container">
<div class="menu" id="menu">
</div>
<div id="content">
</div>
</div>
</body>
3.在.css文件中：（用于外观统一的大型网站） HTML：
<head>
<link rel="stylesheet" type="text/css" href="maincss.css">
</head>
<body>
<div id="container">
<div class="menu" id="menu">
</div>
<div id="content">
</div>
</div>
</body>
CSS：
.menu
width:200px;
【讨论】：
@IMB 想知道如何用#content div 填充剩余空间。菜单已设置为 200px 宽度。
@Mth 好的，谢谢。在他的问题中，他写道他需要菜单为 200 像素，所以我认为这是他的问题以上是关于让 div 占据剩余宽度的 100%？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章