css 如何创建适合屏幕宽度的等宽/等高框？[副本]

k3fezbri 于 2023-07-01 发布在其他

关注(0)|答案(5)|浏览(116)

此问题已在此处有答案：

Maintain the aspect ratio of a div with CSS（33答案）
Setting Element Width Based on Height Via CSS（10个答案）
CSS grid square layout [duplicate]（4个答案）
5天前关闭。
我正试图建立一个网站，有很多的盒子，是平等的宽度和高度。例如，我有一个页面，它有两个并排的相等大小的框。
简单的解决方案是将宽度和高度设置为50 vw。这工作得很好，直到有一个滚动条。我在谷歌上搜索了好几个小时，还是不明白为什么大众和vh会把滚动条作为视口的一部分。
这是我的问题的一个样本

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
}

.box {
    float: left;
    width: 50vw;
    height: 50vw;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.lotta-content {
    height: 10000px;
}

<div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
</div>
<div class="lotta-content"></div>

请注意不需要的水平滚动条。
一个可能的解决方案是使用百分比的宽度，但大众的高度，但它永远不会是一个完美的盒子，这不是世界上最糟糕的事情，但仍然不理想。下面是一个示例：

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
}

.box {
    float: left;
    width: 50%;
    height: 50vw;
}

.red {
    background-color: red;
}

.green {
    background-color: green;   
}

.lotta-content {
    height: 10000px;   
}
}

<div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
</div>
<div class="lotta-content"></div>

为什么vw/vh包括滚动条作为视口的一部分？有比我自己的更好的解决方案吗？我正在寻找一个纯CSS解决方案。我宁愿没有JavaScript。

css

来源：https://stackoverflow.com/questions/29551606/how-can-i-create-equal-width-height-boxes-that-fit-the-screen-width

5条答案

按热度按时间

a9wyjsp71#

一个简单的（简单化的）解决方法是保持滚动条始终存在并处理它

html,body {margin:0;padding:0}
html{overflow-y:scroll}

(use overflow-x（用于使用vh的布局）

赞(0）回复(0）举报 2023-07-01

pgx2nnw82#

如果视口单位不包括原因滚动条会很方便，但毕竟它是显示尺寸（屏幕）。看看这个解决方案与伪元素虽然：
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
在你的例子中也是一个正方形：
https://jsfiddle.net/3z887swo/4/

.box {
    float: left;
    width: 50%;
}

.box::before {
    content: "";
    display: block;
    padding-top: 100%;
}

编辑-如果有人想知道为什么这样做（垂直填充响应原始元素的宽度）...这基本上就是它在规范中的定义：
百分比是相对于生成的盒子的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。
http://www.w3.org/TR/CSS2/box.html#padding-properties
在找到自己的答案后，我认为它需要一些改进。语义上的歧义是我为什么在顶部用“原因”代替“包括”这个词的原因。因为vw单位只考虑了视口的大小- * 不 * 包括任何滚动条和 * 导致 * 溢出和滚动条在另一个方向，当它的宽度增加到100vw（使所需的总空间为视口加上滚动条的宽度，超过屏幕）。
与这里的问题一样，处理vw单元的最佳方法可能是尽可能避免使用它们，因为它们与桌面浏览器（没有重叠的滚动条）不太兼容。

我编辑了包含CSS变量的想法，无论它看起来多么有希望。

赞(0）回复(0）举报 2023-07-01

xwbd5t1u3#

这个问题很老了，上面回答得很好，所以我将重点放在获取滚动条宽度，然后用来计算元素宽度，因为这就是我在这里的原因。希望这能帮助其他Google员工。

草率的CSS解决方案

我根据下面的计算开始编写纯CSS解决方案，但一旦你开始考虑可变宽度容器中的元素，特别是当它们不是100%可见宽度时，calc函数就开始变得复杂和不可读。
对于任何感兴趣的人来说，根元素（<html>）上的calc（假设文档是全宽的，没有更宽的）将给予你滚动条宽度或0，当没有滚动条显示时。

calc( 100vw - 100% );

强大的解决方案

就我个人而言，我不会在这方面与CSS战斗。使用适合作业的工具：

(function get_scrollbar_width() {

    // Get window width including scrollbar.
    const withScrollBar = window.innerWidth;
    
    // Get window width excluding scrollbar.
    const noScrollBar = document.querySelector("html").getBoundingClientRect().width;
    
    // Calc the scrollbar width.
    scrollbarWidth = parseInt((withScrollBar - noScrollBar), 10) + 'px';

    // Update the CSS custom property value.
    let root = document.documentElement;
    root.style.setProperty('--scrollbar', scrollbarWidth);
    
})();

:root {
    --scrollbar: 0px;
}

body {
    overflow: scroll;
}

.demobox {
    display: grid;
    grid: auto / var(--scrollbar) max-content;
    width: calc(10em + var(--scrollbar) );
    margin: 0 auto;
}

.demobox > div {
    background: red;
}

.demobox > p {
    padding: 1em;
    text-align: center;
    width: 10em;
}

<div class="demobox">
    <div></div>
    <p>
        This red grid cell represents the scrollbar width as set
        on the CSS custom property by the JavaScript function.
    </p>
</div>

赞(0）回复(0）举报 2023-07-01

bksxznpy4#