使用css将css属性设置为屏幕宽度

Is there any way to set a css property to the screen width?

What I want to achieve is something close to this:

有没有办法将css属性设置为屏幕宽度?我想要实现的是接近这一点:

div{width: screen width; }

.divTest{width: screen width; }

Edit 1: I would like to use the class to exactly size other elements with the current width as i choose with css.

编辑1:我想使用该类来准确调整当前宽度的其他元素,因为我选择了css。

Edit 2: I don't believe it can be done without scripting of some sort but what do I know.

编辑2:如果没有某种脚本,我不相信它可以完成,但我知道什么。

Edit 3: Final Thoughts A post about the widow re-sizing script using JavaScript is here in Alex V's answer. You'd just add in the script flavor you want. In my case it'd be setting a class property. However I believe setting visual attributes with JavaScript can be bad practice/undesirable in certain uses.

编辑3:最后的想法关于使用JavaScript的寡妇重新调整大小脚本的帖子在Alex V的回答中。你只需添加你想要的脚本风格。在我的情况下,它将设置一个类属性。但是我认为用JavaScript设置视觉属性在某些用途中可能是不好的做法/不合需要的。

3 个解决方案

#1

Try width: 100vw; or as the above comment suggests, width: 100%;.

尝试宽度:100vw;或者如上面的评论所示,宽度:100%;

You may also want to set the meta tag in the HTML if it applies:

如果适用,您可能还想在HTML中设置元标记:

<meta name="viewport" content="width=device-width, initial-scale=1">

Edit:

If the <div> isn't fitting 100% of the screen width, perhaps you need to have the default margin/padding reset:

如果

不适合屏幕宽度的100%,可能需要重置默认的margin / padding:

*, :before, :after {
    box-sizing: border-box; // habit
    margin: 0;
    padding: 0;
}

#2

Generally, a div, if it's set to display:block (which is the default in most browsers, I believe) will expand to the full width of it's parent. If you want it to be the full width of the screen, it really depends on the way your page is configured.

通常,一个div,如果设置为display:block(这是大多数浏览器中的默认值,我相信)将扩展到它的父级的全宽。如果您希望它是屏幕的整个宽度,那实际上取决于页面的配置方式。

If the div is within another element that is only set to width:500px or any other size, the div will only be the width of the parent. But if div's parent is the html body, then it should be the full width of the screen.

如果div位于另一个仅设置为width:500px或任何其他大小的元素内,则div将只是父级的宽度。但是如果div的父级是html主体,那么它应该是屏幕的整个宽度。

I've been smacking my head around on html and css a lot lately, and the best tool I've found to figure out CSS issues like this is Chrome's developer tools. You can actually right-click and "inspect" the div you are looking at. Then you can try out all the different css settings you want and Chrome will show you in real-time what effect those things will have.

我最近在html和css上一直在喋喋不休,而且我发现找出像这样的CSS问题的最好的工具是Chrome的开发者工具。您实际上可以右键单击并“检查”您正在查看的div。然后,您可以尝试所需的所有不同的CSS设置,Chrome会实时向您显示这些内容会产生什么影响。

#3

Viewport units for CSS

CSS的视口单元

vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height

Sizing div based on window width

根据窗口宽度调整div大小

#1

Try width: 100vw; or as the above comment suggests, width: 100%;.

尝试宽度:100vw;或者如上面的评论所示,宽度:100%;

You may also want to set the meta tag in the HTML if it applies:

如果适用,您可能还想在HTML中设置元标记:

<meta name="viewport" content="width=device-width, initial-scale=1">

Edit:

If the <div> isn't fitting 100% of the screen width, perhaps you need to have the default margin/padding reset:

如果

不适合屏幕宽度的100%,可能需要重置默认的margin / padding:

*, :before, :after {
    box-sizing: border-box; // habit
    margin: 0;
    padding: 0;
}

#2

如果div位于另一个仅设置为width:500px或任何其他大小的元素内,则div将只是父级的宽度。但是如果div的父级是html主体,那么它应该是屏幕的整个宽度。

#3

Viewport units for CSS

CSS的视口单元

vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height

Sizing div based on window width

根据窗口宽度调整div大小

秒客网

使用css将css属性设置为屏幕宽度

3 个解决方案

#1

Edit:

#2

#3

#1

Edit:

#2

#3

相关文章