css按比例向左延伸,CSS宽度100vw只延伸到一侧(CSS width 100vw only extending to one side)...

CSS宽度100vw只延伸到一侧(CSS width 100vw only extending to one side)

我正在使用以下代码：

#div {

position: absolute;

left: 0;

right: 0;

width: 100vw !important;

height: 210px !important;

background-image: url('imageurl.com');

background-position: center;

}

我所拥有的是一个div，我试图通过祖父母(屏幕宽度)来适应(宽度方向)。 正如您在上面的代码中看到的那样，我尝试使用width: 100vw ，但它只向右延伸，左侧保持原样。

有谁知道为什么？

I'm using the following code:

#div {

position: absolute;

left: 0;

right: 0;

width: 100vw !important;

height: 210px !important;

background-image: url('imageurl.com');

background-position: center;

}

What I have is an div that I'm trying to get to fit (width-wise) with a grandparent (screen-width). As you can see in the above code, I have attempted to utilize width: 100vw, but it only stretches to the right, leaving the left-hand side as-is.

Does anyone have any idea why?

原文：https://stackoverflow.com/questions/41385443

更新时间：2020-02-16 18:35

最满意答案

尝试使用left: 50%; 和transform: translateX(-50%); 一起。

#div {

width: 100vw;

height: 210px;

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

}

Try using left: 50%; and transform: translateX(-50%); together.

#div {

width: 100vw;

height: 210px;

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

}

相关问答

删除overflow: hidden在.site-inner ，它overflow: hidden了.site-inner底部容器的扩展空间 除非指定了position，否则left属性将不起作用。 请改用margin-left 。 #ex-home-bottom-container {

box-sizing: border-box;

width: 100vw;

margin-left: calc(-50vw + 50%);

}

输出： Remove overflow: hidden

...

您需要考虑您的rect在x和y上移动30px，因此您必须减小其大小并使用vh和vw单位。 您也可以删除空白以避免滚动条： var draw = SVG('wrapper').size(100, 100)

var rect = draw.rect(100, 100).move(30, 30).attr({

stroke: '#f06',

fill: 'none'

}) body {

margin: 0; /*Don't forget this*/

font-size:0;

...

添加显示块 #header nav ul li ul li {

border-radius: 4px;

margin: 0 0 0 0;

padding-left: 4px;

padding-top: 1px;

padding-right: 4px;

width: 100%;

color: black;

fo

...

为防止视口的危险组合，您可以对其进行配置。 使用标签来实现这一目标。 使视口在设备上最大化。 我在移动网站上有一个100％宽度的页脚，此代码没有问题。 有关详细信息，请阅读有关此主题的Apple官方文档 。 To prevent hazardous comportment of the viewport, you can configure it. Use tags t

...

确保身体边距设置为0。 body {

margin: 0;

}

Make sure the margin from the body is set to 0. body {

margin: 0;

}

的jsfiddle 将您的内容包装在 (或

或您想要的任何内容)中，然后给它样式： background-color:orange; 。 另一种方法是扩展updown的结束

并将其放在内容的末尾。 然后给它一种background-color:orange;的样式background-color:orange; 。 但这当然会改变整个事物的字体大小。 JSFiddle - 第二个选项。 JSFiddle Wrap your content in a

...

尝试使用left: 50%; 和transform: translateX(-50%); 一起。 #div {

width: 100vw;

height: 210px;

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

}

的jsfiddle Try using left: 50%; and transform: translateX(-50%); together. #div {

...

试试“overflow-y：hidden;” 对于#designWrapper。 这样您就可以删除水平滚动。 Try "overflow-y:hidden;" for #designWrapper. This way you can remove the horizontal scroll.

在我开始之前，我只是说，由于我在Stoyan Dekov的回答中提出的问题 ，我不会给你一个解决方法。 相反，我只会回答你的问题。 有人可以解释这里发生了什么吗？ font-size ！= width 这里的问题是你假设font-size和width是一样的。 事实并非如此。 CSS字体模块将font-size定义为： ...字体所需的字形高度 。 这意味着font-size与height可比性与width相当。 这也不是vw单元特有的。 如果指定以像素为单位的font-size ，您还会注意到计

...

检查一下 add

html,body {

margin:0;

padding:0;

}

http://jsfiddle.net/5r6ht/ check this add

html,body {

margin:0;

padding:0;

}

http://jsfiddle.net/5r6ht/