Question

CSS：

尝试修复

html {
    max-width:100%;
    max-height:200%;
    min-height:200%;
    min-width:100%;
}
head {
}
body { 
    max-width:100%
    max-height:200%;
    min-height:200%;
    min-width:100%;
    margin:0%;
}
.column {
    max-height:200%
    min-height:200%;
    width:100%; 
    height:200%;
    background-color: rgba(0,0,0,.6); 
    margin: auto; 
    text-align: center;
    top:400px;
    position:absolute;
}

其他东西

.bottom {
    position:absolute;
    top:1750px;
    left:40%;
    width:20%
}
.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}
.frame {
    width:98%;
    height:20%;
}

标题

.title {
    position:absolute;
    top:100px;
    left:49%;
}
.subtitle {
    position:absolute;
    top:150px;
    left:47%;
}

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./index.css">
        <title>5/6P History</title>
        <img src="./assets/background.jpg" style="width:100%; height:100%; position:fixed; z-index:-3;">
        </head>
    </head>
    <body>
        <font size="+6" face="Arial" color="white" class="title">5/6P</font>
        <font size="+1" color="white" class="subtitle">A Sub-Website Of K.P.S</font>

主

        <div class="column">
            <center>
            <p>
                <font size="+10">Kallista Primary School</font>
            </p>
            <form action="http://kallista.global2.vic.edu.au/">
                <input type="submit" value="Visit School Website" />
            </form>
            <p>
                <img src="./assets/image1.jpg" style="width:40%; height:7%;">
            </p>
                <font face="Arial" size="+2%" color="">

文本

                    <p>
                        5/6P is a class in Kallista Primary School.
                    </p>
                    <div class="bottom">

停止抱怨文字太多代码

                        <font face="Arial" size="4">
                            <a href="./studentlist.html" class="button">‌‌‌‌|Student List|‌‌‌‌‌‌</a>
                        </font>
                    </div>
                    Latest News At Kallista:
                    <iframe src="" class="frame">
                    </iframe>
                    (write anything important here)
                </font>
            </center>
        </div>
    </body>
</html>

如您所见，我正在建立一个学校班级网站。但是，我的问题是，当您将高度更改为低于1080p时，黑色背景不会延伸到底部。

解决此问题的任何想法？

Answer 1

如果您使用支持它的浏览器...尝试使用“vh”或“vw”而不是“％”单位...这些单位相对于视口（显示渲染的浏览器部分）网页）....

Html页面以不同的分辨率混乱

1 个答案: