CSS 设置宽度以填充剩余区域的百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/343313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS set width to fill % of remaining area
提问by Jon
Sorry for the slightly rubbish title. I could not think how to describe this one better.
抱歉有点垃圾的标题。我想不出如何更好地描述这一点。
I am trying to implement the Google Friend Connect members gadget on my site, (just got into the scheme and want to put it in without a major redesign, at least for testing sake).
我正在尝试在我的网站上实施 Google 朋友群会员小工具（刚刚加入该计划并希望在没有重大重新设计的情况下将其放入，至少是为了测试）。
My problem is as follows:
我的问题如下：
I have a container div that has a width of 90% of the main page (body). Inside this I am floating a div to the right and setting its width to 300px and putting the google gadget inside it. What I would like is to be able to have a div fill 95% of the space remaining to the left of the google gadget div.
我有一个容器 div，其宽度为主页（正文）的 90%。在这个里面，我向右浮动一个 div 并将其宽度设置为 300px 并将谷歌小工具放入其中。我想要的是能够让 div 填充谷歌小工具 div 左侧剩余空间的 95%。
I don't know if it is possible to be able to mix px and % with divs and widths.
我不知道是否可以将 px 和 % 与 div 和宽度混合使用。
I hope this makes sense.
我希望这是有道理的。
Thanks
谢谢
采纳答案by Oli
It is. You're looking for a semi-fluid layout. The quest was was originally the holy grail of CSS implementation... But as you can see from that link (they're doing 3 columns, 2 fixed but it's easy to alter), it's a problem long solved =)
这是。您正在寻找半流体布局。该任务最初是 CSS 实现的圣杯......但是正如您从该链接中看到的那样（他们正在做 3 列，2 列已修复，但很容易更改），这是一个长期解决的问题 =)
回答by Anthony Tambrin
I did a quick experiment as well after looking at a number of potential solutions all over the place. What I was trying to do was to have a mix of fluid and fixed rows and columns.
在查看了许多潜在的解决方案后，我也做了一个快速的实验。我试图做的是混合流动和固定的行和列。
This is what I ended up with:
这就是我最终的结果：
回答by Reggie Pinkham
If you prefer to avoid floats and clearfixes, use flex layout.
如果您更喜欢避免浮动和清除修复，请使用 flex 布局。
.main {
display: flex;
width: 90%;
}
.col1 {
flex-grow: 1;
}
.col2 {
width: 300px;
margin-left: 5%;
}<div class="main">
<div class="col1" style="background: #518cf3;">Left column</div>
<div class="col2" style="background: #94d0bb;">Right column</div>
</div>Note:Add flex vendor prefixes if required by your supported browsers.
注意：如果您支持的浏览器需要，请添加 flex 供应商前缀。
回答by BasisInteractive
You need to create an algorithm using jQuery or JS which checks for the remaining space and sets the width of the "remainder" element dynamically, per a responsive build. If the build is not responsive, you can test and set the element width by doing simple mathematical calculations.
您需要使用 jQuery 或 JS 创建一个算法，它会根据响应式构建检查剩余空间并动态设置“剩余”元素的宽度。如果构建没有响应，您可以通过简单的数学计算来测试和设置元素宽度。
We have experienced similar issues whilst building a liquid-responsive-grid based media system.
我们在构建基于液体响应网格的媒体系统时遇到了类似的问题。
