Question

我有一个简单的网页，作为其他页面的目录。我有五个图像用作其他页面的按钮，但我需要它们以特定的方式显示。我把所有东西都集中在一起，背景是静态的，滚动时不会移动，但问题出在按钮上。

我希望它们具有基于浏览器当前高度的特定高度。我说当前高度，因为如果用户调整窗口大小，我需要它自己调整大小。

此外，更重要的是，我需要这样做以防止目录大于浏览器的高度。我注意到，在不同的屏幕分辨率下，图像会变大或变小，因此可能看起来很糟糕。

因此，例如，我希望浏览器底部和目录之间以及浏览器顶部和目录之间的空间大小相同，无论多大浏览器窗口是用户屏幕的分辨率。

我正在通过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>

Answer 1

你可以通过CSS设置这一切，但你也可以使用JavaScript。

您需要在百分比（％）中设置属性;如：

宽度：90％（您可以根据需要在屏幕上显示替换值）
为了防止不超过指定的宽度，您可以设置 max-width （再次以百分比表示）
您可以将身高设置为自动。

Answer 2

    $(document).resize(function(){
        if(document.innerHeight > 350) {
            do something
        }
    });

Answer 3

我同意调整大小，宽度和高度等方面的其他答案。但在阅读完问题之后，我认为响应式用户界面是您正在寻找的东西。为什么不尝试像BootStrap这样的框架来帮助你。我们可以使用一些非常容易使用的东西，而不是重新发明轮子。 getbootstrap.com是网址，易于实现。（我不能发表评论，因为我的名声较少:)）

Answer 4

您可以通过两种方式实现目标：

CSS媒体查询：CSS检测视口的大小（窗口，因为没有更好的解释方式），并且如果视口与{{1匹配，则应用某些规则查询。以下是一些例子。另外，请查看此CodePen以更好地了解其工作原理。
```
@media
```
完成此任务的另一种方法是使用百分比单位：将按钮的宽度设置为50％，并调整浏览器窗口的大小。他们现在应该灵活。玩百分比直到你满意为止。就个人而言，我更喜欢媒体查询，因为它们可以提供更高的精确度，但请您选择！希望这有用！

如何根据当前窗口大小动态更改HTML页面的内容

4 个答案: