是否可以在 CSS3 中使 div 50px 小于 100%？ [复制]

Posted 2023-03-06

【中文标题】是否可以在 CSS3 中使 div 50px 小于 100%？ [复制]

【英文标题】：Is it possible to make a div 50px less than 100% in CSS3? [duplicate]

【发布时间】：2012-06-21 01:51:57

【问题描述】：

是否可以在纯 CSS 中使 div 50px 小于 100%？我希望<div> 仅比 100% 小 50 像素。我不想要任何 javascript。

【问题讨论】：

@hakre - 您的链接在 CSS 中，这是在 CSS3 中。

怎么是 CSS 不是 CSS3 不是 CSS 不是 CSS3 不是 CSS 不是...？如果您明确要求仅在第 3 版中制定的 CSS 功能，请提出要求（一般不是 CSS - 是的，您的问题正文与此处的标题不同，所以不要怪我；））

好吧，看看问题标题下方的正文。您应该使用正文来明确 CSS3 问题（在我们讨论时请说出是 CSS3 还是 CSS3+）

@hakre：同意你的观点——原始问题中“CSS3”的唯一痕迹是在标签中。如果我在被问到这个问题时看到了这个问题，我会删除标签，因为确实，CSS3 就是 CSS。它不是一种完全独立且不同的语言，尽管它远远超出了 CSS2（所谓的“CSS”）中的可能性。但由于编辑明确表明这是一个寻找 CSS3 答案的 CSS3 问题，我想我们可以保持原样......

【参考方案1】：

是的，你可以。在不使用 IE 的 expression() 的情况下，您可以在 CSS3 中使用 calc() 来做到这一点。

div 
    width: 100%;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);

演示：http://jsfiddle.net/thirtydot/Nw3yd/66/

这将使您的生活变得更加轻松。目前支持 3 种主要浏览器：Firefox、Google Chrome (WebKit) 和 IE9：http://caniuse.com/calc

MDN：https://developer.mozilla.org/en/CSS/-moz-calc

【讨论】：

问题是 a) 问题并不清楚宽度与高度的关系，b) 自我回答不是最佳答案。对于宽度，sandeep 更好，对于高度，gilly3 更好。今天一些重要的浏览器统计数据不支持 OP 的答案。 (IE7/8)

顺便说一句：非前缀版本应该在前缀版本之后，而不是之前。见developer.mozilla.org/Writing_Forward_Compatible_Websites 另外，根据我的经验，很多 calc() 情况可以用box-sizing 代替。

"expression()" 会导致问题，因为浏览器会重新计算鼠标运动每个像素上的函数（在表达式内部），这会影响处理器的使用。在这种情况下（使用 calc）会发生这种情况吗？

我不得不说，对于大多数网站来说，将calc() 用于任何重要的事情 是个坏主意。浏览器支持不够好。

请注意，这个问题是特定于 CSS3 的，并且有一个特定于 CSS3 的答案，因此它不会欺骗其他仅适用于早期版本的建议。

【参考方案2】：

DIV 自动采用其父级的宽度。所以不需要定义任何width。通常会简单地这样写：

div
    margin-right:50px;

查看fiddle

【讨论】：

this vs this 怎么样？

@Chango - That 在您调整窗口大小时非常棒。

@Chango 可能就是你想要达到的目标jsfiddle.net/Nw3yd/6

@sandeep 在您的示例中，两个 div 的大小不同，绿色的具有固定大小，红色的具有剩余的负 200 像素。您的解决方案很棒，但我发现 Derek 的答案的特定用例很有趣。

【参考方案3】：

另一种选择是绝对定位。

div 
    position: absolute;
    left: 0;
    right: 50px;

fiddle

但是，Sandeep 的解决方案是您通常应该使用的解决方案。只是 避免过度使用float。这可以防止元素自然填充其容器。

【参考方案4】：

我的解决方案在有和没有float: left 的情况下都适用。

html：

<div></div>

css:

div 
    height: 20px;
    background: black;
    float: left;
    width: 100%;
    padding-right: 50px;
    box-sizing: border-box;
    background-clip: content-box; 
​

Demo

兼容性： 火狐 3.6、Safari 5、Chrome 6、Opera 10、IE 9

【讨论】：

你方法中的 div 仍然占据了整个屏幕的宽度，所以如果你把它们中的两个放在另一个旁边，你就不能让它们浮动。

【参考方案5】：

jsFiddle

使用显示 block 和 margin。 display:block 未与已定义的 height/width 组合时将尝试填充其父级。

header 
    width:100%;
    background:#d0d0d0;
    height:100%;

h1 
    display:block;
    border:#000 solid 1px;
    margin:0 50px 0 0;
    height:100px;

<header>
    <h1></h1>
</header>

【参考方案6】：

是的，我们可以通过制作来做到这一点

#custom_div
 width:100%;
 margin-right:50px;
 

谢谢

【讨论】：

这和sandeep的答案一样，除了width:auto;，没有效果。您的回答根本没有增加任何价值。而不是发布您自己版本的桑迪普答案，您应该对桑迪普的答案进行投票。