CSS: 宽度与百分比的简单总结

Posted 2023-04-18

参考技术A

宽度 width (与高度 height )是在网页布局中经常用到的属性，但作为新手容易会对两者的定义产生误解。下面我们给出 width 与 height 的准确定义：

上述定义很清晰地指出，元素的 width 只是元素 content 内容区的宽度，不包括 padding , border , 与 margin ，即元素的 width 并不表示元素的 可视宽度 。

auto 与 text-align:center 都是在局中排版中常会用到的属性设置，他们很容易被混用，下面我们给出两者的准确定义：

因此，当我们想让一个块级元素在另一个块级元素中居中时(比如 p 在某个 div 中)， text-align:center 是无效的，而可以通过设置 width:auto 或者 margin:auto 实现自动局中效果。

百分比是实现页面自适应的重要途径，而元素百分比的 宿主 到底是谁一直是令人困扰的问题。其实CSS对于百分比的定义十分明确：

至此我们发现， 包含块( containing block ) 的确切定义就显得尤为重要。有时间的情况下会在这篇中进行进一步的补充或新开一篇进行介绍。

我可以根据基于百分比的宽度设置 div 的高度吗？ [复制]

【中文标题】我可以根据基于百分比的宽度设置 div 的高度吗？ [复制]

【英文标题】：Can I set the height of a div based on a percentage-based width? [duplicate]

【发布时间】：2012-04-21 05:05:44

【问题描述】：

假设我有一个宽度为主体宽度 50% 的 div。如何使其高度等于该值？这样当浏览器窗口宽1000px时，div的高宽都是500px。

【问题讨论】：

它不能在直接的 css 中完成。 js的解决方案很简单。

它实际上可以单独使用 CSS 完成。请参阅 Fadi 的回答。

另一种方法，也适用于根据高度设置宽度（与填充方法不同），可以找到here

这不是链接问题的副本。这个问题专门询问关于基于高度而不是宽度的正方形 - 这是一个非常不同的问题。

纯 JS 方法：el=document.getElementById('id_div') el.style.height=el.offsetWidth+"px" 这会给你一个完美的正方形。让您的 JS 文件在页面加载时执行此代码 -- window.onload

【参考方案1】：

这实际上可以只用 CSS 完成，但 div 内的内容必须绝对定位。关键是使用填充百分比和box-sizing: border-box CSS 属性：

div 
  border: 1px solid red;
  width: 40%;
  padding: 40%;
  box-sizing: border-box;
  position: relative;

p 
  position: absolute;
  top: 0;
  left: 0;

<div>
  <p>Some unnecessary content.</p>
</div>

根据自己的喜好调整百分比。这是一个JSFiddle

【讨论】：

我知道width: 40% 是父元素的40%，但padding: 40% 与什么有关？

填充是使盒子的宽度和高度相等的原因。它用填充物“膨胀”了盒子的内部。

Firefox 似乎在该方法上存在问题，但修复起来很简单。如果你想要一个 50% 的盒子，你需要 "padding: 25%;"。每边 25%。

我讨厌你如何在 CSS 中轻松地进行 3D 变换、阴影、圆角等，但是要有一个方形 div 需要一个 hack...

@Ryan padding: 40% 与元素的宽度有关（包括 padding-top 和 padding-bottom）。绝对让我感到惊讶，another question 上有一个很好的解释。

【参考方案2】：

这可以通过 CSS hack 完成（请参阅其他答案），但也可以使用 JavaScript 轻松完成。

将 div 的宽度设置为（例如）50%，使用 JavaScript 检查其宽度，然后相应地设置高度。这是一个使用 jQuery 的代码示例：

$(function() 
    var div = $('#dynamicheight');
    var width = div.width();
    
    div.css('height', width);
);

#dynamicheight

    width: 50%;
    
    /* Just for looks: */
    background-color: cornflowerblue;
    margin: 25px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="dynamicheight"></div>

如果您希望框在调整大小时随浏览器窗口一起缩放，请将代码移动到一个函数并在窗口调整大小事件中调用它。这也是一个演示（查看示例全屏并调整浏览器窗口大小）：

$(window).ready(updateHeight);
$(window).resize(updateHeight);

function updateHeight()

    var div = $('#dynamicheight');
    var width = div.width();
    
    div.css('height', width);

#dynamicheight

    width: 50%;
    
    /* Just for looks: */
    background-color: cornflowerblue;
    margin: 25px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="dynamicheight"></div>

【讨论】：

您不需要 javascript。您可以按照以下所述进行：高度：0px；宽度：40%；填充顶部：40%；

如上所述，使用 JavaScript 是完全没有必要的，并且会出现诸如 FOUC 或更糟糕的问题，禁用 JS（什么都不会发生）。使用 CSS 方法。

@Billy：“完全没有必要”？您忘记了下面的 CSS 方法有一些严格的限制。 Javascript 方法适用于所有启用 Javascript 的场景。

@Hubro“严格限制”？

@Billy：乍一看，div 似乎需要设置宽度和绝对定位的内容。此外，看看 cmets，结果似乎因浏览器而异

【参考方案3】：

<div><p>some unnecessary content</p></div>

div
    border: 1px solid red;
    width: 40%;
    padding: 40%;
    box-sizing: border-box;
    position: relative;

p
    position: absolute;
    top: 0;
    left: 0;

为此，我认为您需要将填充定义为 ex。最佳？像这样：

<div><p>some unnecessary content</p></div>

div
    border: 1px solid red;
    width: 40%;
    padding-top: 40%;
    box-sizing: border-box;
    position: relative;

p
    position: absolute;
    top: 0;
    left: 0;

无论如何，这就是我让它工作的方式，因为只是在周围填充它不会是一个正方形。

【讨论】：

谢谢！上面的答案确实渲染了一个正方形，但它不是其父级的 40% 宽度。

【参考方案4】：

我为此创建了一个 CSS 方法，它根据视口宽度调整大小，但在视口高度的 100% 处最大化。它不需要box-sizing:border-box。如果无法使用伪元素，则可以将伪代码的 CSS 应用于子元素。 Demo

.container 
  position: relative;
  max-width:100vh;
  max-height:100%;
  margin:0 auto;
  overflow: hidden;

.container:before 
  content: "";
  display: block;
  margin-top: 100%;

.child 
  position: absolute;
  top: 0;
  left: 0;

Support table for viewport units

我在scaling responsive animations 上的一篇 CSS-Tricks 文章中写了关于这种方法和其他方法的文章，你应该看看。