Html 如何在css中获取窗口大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15316143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get the window size in css?
提问by Howard Stark
I am currently writing my header for my website, and I have a friend who is helping me. We have two very different computers (PC and Mac) and used different browsers to ensure that it is multiplatform and everything, and we found that the header doesn't fit on his screen. So I realized it would be easier to just get the windows width and divide that by four and make that the size of the buttons. How would I going about doing this?
我目前正在为我的网站编写标题，我有一个朋友正在帮助我。我们有两台截然不同的计算机（PC 和 Mac）并使用不同的浏览器来确保它是多平台的，并且我们发现标题不适合他的屏幕。所以我意识到只获取窗口宽度并将其除以四并使其成为按钮的大小会更容易。我该怎么做？
Thanks so much!
非常感谢！
EDIT: Here is what I am using:
编辑：这是我正在使用的：
div.horizontal
{
position: relative;
width: 100%;
height:45px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 52%, rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(52%,rgba(255,255,255,0.10)), color-stop(100%,rgba(255,255,255,0))), url("../img/truefactzheader.png");
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
width:25%;
height:35px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
height:45px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0.25))), url("../img/truefactzheader.png");
background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: -o-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: -ms-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#99000000',GradientType=0 );
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
}
回答by BenM
Well, assuming that your header element is 100% width of the screen, and you want the buttons to be equal width, the maths should be > 100 / 4 = 25%. Each of your buttons should occupy 25% of the header's width.
好吧，假设您的标题元素是屏幕的 100% 宽度，并且您希望按钮的宽度相等，那么数学计算应该是 > 100 / 4 = 25%。每个按钮都应占据标题宽度的 25%。
So, in your CSS you should define them as follows:
因此，在您的 CSS 中，您应该按如下方式定义它们：
#my_header {
width: 100%;
float: left;
}
#my_header a.button {
display: block;
float: left;
width: 25%;
height: 30px
}
Please see this jsFiddle demo.
请参阅此jsFiddle 演示。
So, you need to update your code as follows (I've taken out the browser-specific properties for clarity:
因此，您需要按如下方式更新您的代码（为了清楚起见，我已经删除了特定于浏览器的属性：
div.horizontal {
position: relative;
width: 100%;
height:45px;
}
div.horizontal ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div.horizontal li {
float: left;
width: 25%;
}
div.horizontal a {
display: block;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
height:35px;
}
