我有一个简单的网页，作为其他网页的目录。我有五个图像用作其他页面的按钮，但我需要它们以特定方式显示。我的一切都居中，背景是静态的，滚动时不会移动，但问题出在按钮上。
我希望它们具有基于浏览器当前高度的特定高度。我说 current height 是因为我需要它在用户调整窗口大小时自动调整大小。
此外，更重要的是，我需要它来防止目录大于浏览器的高度。我注意到在不同的屏幕分辨率下，图像会变大或变小，因此看起来很糟糕。
因此，例如，我希望浏览器底部和目录之间以及浏览器顶部和目录之间的空间大小相同，无论它有多大浏览器窗口或用户屏幕的分辨率。
我在想，通过 javascript，使用类似 window.innerHeight 的东西来获取窗口的大小，并将包含目录的 div 的高度设置为此值。
这是我目前所拥有的，但脚本似乎根本没有做任何事情(这是我第一次使用 javascript，所以我很可能会做一些愚蠢的事情。):
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
background-image: url(../images/background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#logo {
width: 200px;
margin-top: 15px;
}
.c1 {
width: 300px;
margin-top: 15px; <!--margin between buttons-->
}
</style>
<title>Some Title</title>
</head>
<body bgproperties="fixed"> <!--static background-->
<div align="center" id="contents">
<div >
<a href="http://somewebpage">
<img id="logo" src="images/logo.png" alt="Logo"> <!--title button-->
</a>
</div>
<div >
<a href="http://somewebpage">
<img class="c1" src="images/img1" alt="image 1"> <!--second button-->
</a>
</div>
<div>
<img class="c1" src="images/img2" alt="image 2"> <!--third button-->
</div>
<div >
<img class="c1" src="images/img3" alt="image 3"> <!--fourth button-->
</div>
<div>
<img class="c1" src="images/img4" alt="image 4"> <!--fifth button-->
</div>
</div>
<script>
var ht = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; <!--Get the height of the browser-->
document.getElementById("contents").style["height"] = ht; <--set height of table of contents-->
</script>
</body>
</html>
最佳答案
您可以通过 CSS 设置这一切，但您也可以使用 JavaScript。
您需要的是在Percentage(%)中设置属性；如:
宽度:90%(您可以根据需要在屏幕上显示替换值)
为了防止不超过指定的宽度，您可以设置max-width(再次以百分比表示)
您可以将高度设置为自动。
关于javascript - 如何根据当前窗口大小动态更改 HTML 页面的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27936936/