Question

我有一个主页/登陆页面，其底部有一个图像（画布）和一个旋转木马。

我希望整个页面都是100％的屏幕大小，并使用以下发行版：

navbar:10% height
canvas/image:60% height
carousel:30% height

如何在不使用滚动条的情况下将整个页面占据屏幕高度的百分比来确保此分布？

目前我的画布固定高度为400px，其中的幕布在不同的屏幕上混乱了

另外，我想确保支持不同尺寸的屏幕（台式机，笔记本电脑，显示器等）。如果不支持移动屏幕，它会很好，但是很高兴。

Answer 1

简单，根据您的需要修改下面的代码。

<html>
<head>
    <style>
    html,body {
        margin: 0;
        padding: 0;
    }
    #nav {
        position: absolute;
        top: 0;
        height: 10%;
        width: 100%;
        background: red;
    }
    #can {
        position: absolute;
        bottom: 30%;
        height: 60%;
        width: 100%;
        background: blue;
    }
    #car {
        position: absolute;
        bottom: 0;
        height: 30%;
        width: 100%;
        background: green;
    }
    </style>
</head>
<body>
    <div id="nav">
        Test Nav Div
    </div>

    <div id="can">
        Test Canvas Div
    </div>  

    <div id="car">
        Test Carousel Div
    </div>
</body>
</html>

使主页100％的屏幕高度

1 个答案: