从绝对位置到页面宽度的矩形 [英] Rectangle from absolute position to page width

问题描述

具体:我想在一个高度为100像素的网站上绘制一个矩形，例如，其左端为100像素，并一直指向该网站的右侧(不增大页面宽度).

Concretely: I want to draw a rectangle on a website that has height 100px, say, whose left end is at 100px, say, and that goes on to the right side of the website (without making the page width bigger).

我尝试通过设置一个宽度为200px的svg元素(例如包含witdh 5000的矩形)来做到这一点，但是我不知道如何使父svg元素不裁剪该矩形:

I tried to do it by having an svg element of width 200px, say, that contains a rectangle of witdh 5000, but I don't know how to make the parent svg element not crop the rectangle:

<svg width="200" height="100" viewBox="0 0 200 100"><rect x="100" y="0" width="5000" height="100" style="fill:rgb(255,0,0)"></svg>

另一种可能性是，如果我可以输入width ="100％-100px"

An alternative possibility would be if I could have something like width="100%-100px"

请注意，这并不能满足我的要求，因为左端会根据页面宽度而有所不同:

Note that this doesn't do what I want since the left end will vary depending on the page width:

<svg width="100%" height="100" viewBox="0 0 200 100" preserveAspecRatio="none"><rect x="100" y="0" width="5000" height="100" style="fill:rgb(255,0,0)"></svg>

当然可以以数百种方式动态地做到这一点(例如使用Java脚本)，但我正在寻找静态解决方案.

One can certainly do it in hundrets of ways dynamically (using e.g. Java Script), but I'm looking for static solution.

具体问题由下面的Paulie_D和maioman解决(通过替代可能性").我仍然对以下内容感兴趣:

the conrete problem is solved by Paulie_D and maioman below (via the "alternative possibility"). Still I would be interested in the following:

抽象:如何让内容绘制超出其边界框?

Abstractly: how can I have content draw beyond its bounding box?

推荐答案

最明显的方法是绝对定位div并使用calc设置宽度.

The most obvious method is to position the div absolutely and use calc to set the width.

div {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% - 100px);
  height: 100px;
  background: red;
}

<div></div>

注意...根据您需求的实际性质，可能还会存在其他选项.

这篇关于从绝对位置到页面宽度的矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！